I'm starting to learn react from this tutorial https://www.youtube.com/watch?v=DLX62G4lc44 so I did first 2 chapters and all good, then a week later I run the same code exactly and started to get this error: Uncaught SyntaxError: Cannot use import statement outside a module I tried every thing on the web, best thing I got is put type="module" or type="text" the error gone but nothing shows up at the page! and got this new error: Uncaught SyntaxError: Unexpected token '<' can somebody please help, I'm starting to give up please help here is the code:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>React</title>
</head>
<body>
<h1>Hello React</h1>
<div id="root"></div>
<script src="index.js"></script>
</body>
</html>
JS:
import React from "react"
import ReactDOM from "react-dom"
function MyApp(){
return(
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
)
}
ReactDOM.render(<MyApp/>,document.getElementById("root"))
Uncaught SyntaxError: Unexpected token '<'
To solve this you need to add to the HTML script tag type="text/babel"
like so: <script src="path/to/script" type="text/babel"></script>
And to solve the "Uncaught SyntaxError: Cannot use import statement outside a module" I did a quick Google search and found this:
https://nkaushik.com/javascript/solved-cannot-use-import-statement-outside-module/
In short: In your package.json file, simply add “type”:“module”
If you don't have a package.json here are the docs on how to make one:
Write in console npm install react-scripts
than make sure you're package.json file have this:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Don't forget to add a comma, after that in console write npm start