react 和 react-dom 依賴的問題

Question

我開始學習 ReactJS。 我的計算機上安裝了節點。 我正在編寫一個基本的“Hello World”編程，看看我的設置是否正常。

package.json 文件為：

  {
  "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"
  }
}

Javascript 和 HTML 文件如下 -

<!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"));

但是，當我在瀏覽器上的 html 文件上運行此程序時，我在控制台中收到錯誤消息：Uncaught SyntaxError: Cannot use import statement outside a module and no output is displayed。我正在使用 VSCode，當我使用內置運行運行腳本時，我收到一條錯誤消息，指出要運行 ES add type:module in package.json 我理解這是因為內置運行可能在節點上運行，但為什么這個問題出現在節點上瀏覽器和實時服務器也是？ 這是設置問題還是語義問題或任何其他技術問題。 我該如何解決這個問題？

當我使用 npm 運行時，啟動以下是錯誤日志-

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 ]

Answer 1

Ciao，嘗試更改您的index.html文件，如下所示：

<div id="root"></div>

一切都應該工作。

檢查這個例子。

react 和 react-dom 依賴的問題

問題描述

1 個解決方案

解決方案1
0 2020-08-11 14:43:25

react 和 react-dom 依賴的問題

問題描述

1 個解決方案

解決方案1 0 2020-08-11 14:43:25

解決方案1
0 2020-08-11 14:43:25