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 — Layhout
– Layhout, Commented Dec 8, 2022 at 6:57
Does this answer your question? "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6 — Layhout
– Layhout, Commented Dec 8, 2022 at 7:12
Unfortunately it didn't. I am getting Uncaught SyntaxError: Unexpected token '<' (at index.js:5:5). this is where <nav starts — Happy Coder
– Happy Coder, Commented Dec 8, 2022 at 7:18
ah, that means the Uncaught SyntaxError: Cannot use import statement error is solved. — Layhout
– Layhout, Commented Dec 8, 2022 at 7:19

Layhout · Accepted Answer · 2022-12-08 07:30:15Z

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>

Erfan · Accepted Answer · 2022-12-08 07:33:33Z

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

Collectives™ on Stack Overflow

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

HTML

Javascript

package.json

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

HTML

Javascript

package.json

2 Answers 2

Comments

Comments

Linked

Related