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

Question

I keep getting this error:

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

I've read many posts with this or similar errors, but they don't seem to be related/helpful.

here is one example:

...
const posts = usePosts()


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

the error happens at the very first <

adding "type": "module" at the top of package.json like this doesn't change it:

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

(note, that I've tried that example in Webstorm and VSCode; the one below just in Webstorm)

here is another example:

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

what is interesting about this one: it works, as long as I start the project with the provided start script.

node filename.js returns:

(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

and when I add "type": "module to package.json it returns the same unexpected token error as above.

I'm using: Node v14.2.0 ESLint: 7.16.0

What am I missing?

Answer 1

Few things to note

• keywords like import and arrow functions ( () => {} ) are what we call the ES6 syntax. So if you are working with them you probably need a transpiler like Babel (You can find so many tutorials on this topic)
• HTML-like syntax inside render function is called JSX (Read here ) and once again if you use them you need Babel to transpile that syntax to plain JS.