Syntax Error: Cannot use import statement outside a module / Unexpected token '<' - related errors

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)

我读过很多有这个或类似错误的帖子，但它们似乎不是 related/helpful。

这是一个例子：

...
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'))

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

节点filename.jsreturns:

(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”：“模块添加到 package.json 它 returns 与上面相同的意外标记错误。

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

我错过了什么？

Answer 1

注意事项

像import和箭头函数（() => {}）这样的关键字就是我们所说的ES6语法。所以如果你和他们一起工作，你可能需要一个像 Babel 这样的转译器（你可以找到很多关于这个主题的教程）
HTML-like 语法在 render 函数中称为 JSX（阅读 here），如果你再次使用它们，你需要 Babel 将该语法转换为纯 JS。

Syntax Error: Cannot use import statement outside a module / Unexpected token '<' - related errors

Syntax Error: Cannot use import statement outside a module / Unexpected token '<' - related errors

javascript

node.js

eslint