Question

我不断收到此错误：

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

我错过了什么？

Answer 1

注意事项

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

语法错误：无法在模块外使用导入语句/意外标记“<” - 相关错误

1 个答案: