Issues with react and react-dom dependencies
Question
I am starting to learn ReactJS. I have node installed on my computer. I am writing a basic "Hello World" Programming to see if my setup is alright.
The package.json file is:
{
"name": "part1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
The Javascript and HTML files are as follows-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Part1</title>
<link href="style.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";
ReactDOM.render(<h1>"Hello world"</h1>,document.getElementById("root"));
However when i run this on the html file on the browser I get an error in the console as: Uncaught SyntaxError: Cannot use import statement outside a module and no output is displayed. I am using VSCode and when i run the script using inbuilt run, i get an error that states that To run ES add type:module in package.json which i understand since the inbuilt run probably runs on node but why is this issue there on the browser and live server also? Is this a setup issue or a semantic issue or any other technical issue. How do I resolve this?
When I am running using npm start the following is the error log-
0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
2 info using npm@6.14.6
3 info using node@v12.18.3
4 verbose stack Error: missing script: start
4 verbose stack at run (/usr/local/lib/node_modules/npm/lib/run-script.js:155:19)
4 verbose stack at /usr/local/lib/node_modules/npm/lib/run-script.js:63:5
4 verbose stack at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:116:5
4 verbose stack at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:436:5
4 verbose stack at checkBinReferences_ (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:391:45)
4 verbose stack at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:434:3)
4 verbose stack at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:161:5)
4 verbose stack at ReadFileContext.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:350:20)
4 verbose stack at ReadFileContext.callback (/usr/local/lib/node_modules/npm/node_modules/graceful-fs/graceful-fs.js:123:16)
4 verbose stack at FSReqCallback.readFileAfterOpen [as oncomplete] (fs.js:261:13)
5 verbose cwd /Users/pk/Desktop/Learning-react/part1
6 verbose Darwin 19.3.0
7 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
8 verbose node v12.18.3
9 verbose npm v6.14.6
10 error missing script: start
11 verbose exit [ 1, true ]
1 answers
solution1
0 2020-08-11 14:43:25
Ciao, try to change your index.html file like this:
<div id="root"></div>
And everything should work.
Check this example.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.