I have come across the following code while learning React and trying to execute it.
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"
}
}
Upon opening the browser, an error message is displayed:
index.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)
This results in nothing being displayed on the browser. How can this issue be resolved? I attempted adding module to the script tag, however another error occurred:
<script src="index.js" type="module"></script>
index.js:1 Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:1:1)