Uncaught SyntaxError: Cannot use import statement outside a module for React

Question

I have the following code that I am trying to run as part of learning React.

HTML

<html>
    <head>
        <link href="index.css" rel="stylesheet">
    </head>
    <body>
        <div id="root">
        </div>
    <script src="index.js"></script>
    </body>
</html>

Javascript

import React from "react"
import ReactDOM from "react-dom"

const navbar= (
    <nav>
        <h1>Alchamentry</h1>
        <ul>
            <li>Pricing</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
)
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(navbar)

package.json

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Now when I open the browser, I get the following error:

index.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

and nothing is displayed on the browser. How to fix this? I tried to add the module to the script tag, but it is giving another error that says

<script src="index.js" type="module"></script>

index.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)

you need to add `"type": "module"` in `package.json`. i think. [more on that](https://stackoverflow.com/questions/61401475/why-is-type-module-in-package-json-file) — Layhout, Dec 08 '22 at 06:57
Does this answer your question? ["Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6](https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import) — Layhout, Dec 08 '22 at 07:12
Unfortunately it didn't. I am getting `Uncaught SyntaxError: Unexpected token '<' (at index.js:5:5)`. this is where ` — Happy Coder, Dec 08 '22 at 07:18
ah, that means the `Uncaught SyntaxError: Cannot use import statement` error is solved. — Layhout, Dec 08 '22 at 07:19
you need to create a function that return `jsx`, not a variable. — Layhout, Dec 08 '22 at 07:20

score 1 · Answer 1 · answered Dec 08 '22 at 07:30

here is how to create a react component. note: a react component must has capitalized name.

const Navbar = () => {
  return (
    <nav>
      <h1>Hello, i am NavBar. Nice to meet you. And here are my links</h1>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Profile</a></li>
      </ul>
    </nav>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Navbar/>);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

score 1 · Answer 2 · answered Dec 08 '22 at 07:33

You need tools like Webpack and Babel to bundle and transpile jsx to valid JavaScript code. Such tools come out of the box if you try to create a project with packages like CRA.

This jsx isn't valid JavaScript and is not understood by browser's JavaScript engine.

    const navbar= (
    <nav>
        <h1>Alchamentry</h1>
        <ul>
            <li>Pricing</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
)

But if you still want to do all the configs by yourself, you can check this article:

Click

Uncaught SyntaxError: Cannot use import statement outside a module for React

HTML

Javascript

package.json

2 Answers2