语法错误：无法在模块外部使用 import 语句/意外标记“<”- 相关错误答案

【问题标题】：Syntax Error: Cannot use import statement outside a module / Unexpected token '<' - related errors语法错误：无法在模块外部使用 import 语句/意外标记“<”- 相关错误
【发布时间】：2021-04-01 22:12:34
【问题描述】：

我不断收到此错误：

SyntaxError: Unexpected token '<'
    at Loader.moduleStrategy (internal/modules/esm/translators.js:81:18)
    at async link (internal/modules/esm/module_job.js:37:21)

我已经阅读了许多包含此错误或类似错误的帖子，但它们似乎没有相关/有用。

这是一个例子：

...
const posts = usePosts()


function App() {
    return (
        <div>
            {posts &&
                posts.map(post => {
                    <div>{post.title}</div>
                })
            }
            <ReactQueryDevtools/>
        </div>
    )
}
ReactDOM.render(<App />, document.getElementById("root"));

错误发生在最开始

像这样在 package.json 顶部添加 "type": "module" 不会改变它：

{
  "name": "my-app",
  "version": "0.0.0",
  "type": "module",
  "devDependencies": {
...

（请注意，我已经在 Webstorm 和 VSCode 中尝试过该示例；下面的示例仅在 Webstorm 中）

这是另一个例子：

import * as React from 'react'
import ReactDOM from 'react-dom'
import {Logo} from './components/logo'

function App() {
  return (
    <div>
      <Logo width="80" height="80" />
      <h1>Bookshelf</h1>
      <div>
        <button onClick={() => alert('login clicked')}>Login</button>
      </div>
      <div>
        <button onClick={() => alert('register clicked')}>Register</button>
      </div>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

这个有趣的是：只要我使用提供的启动脚本启动项目，它就可以工作。

节点文件名.js 返回：

(Use `node --trace-warnings ...` to show where the warning was created)
/Users/johannes/Documents/GitHub/bookshelf/src/index.final.js:1
import * as React from 'react'
^^^^^^

SyntaxError: Cannot use import statement outside a module

当我将 "type": "module 添加到 package.json 时，它会返回与上述相同的意外令牌错误。

我正在使用：节点 v14.2.0 ESLint：7.16.0

我错过了什么？

【问题讨论】：

希望有人能为这个问题找到一个更好的标题

标签： javascript node.js eslint

【解决方案1】：

注意事项

import 和箭头函数 (() => {}) 之类的关键字就是我们所说的 ES6 语法。因此，如果您正在使用它们，您可能需要像 Babel 这样的转译器（您可以找到很多关于这个主题的教程）
渲染函数中类似 HTML 的语法称为 JSX（阅读 here），如果您再次使用它们，则需要 Babel 将该语法转换为纯 JS。

【讨论】：