javascript - 执行错误 ReactDOM.render(, document.getElementById ('root' ));

Question

我正在尝试运行我的 react 代码，该代码在本地环境中运行良好，但在移动到生产服务器时出现以下错误:

Project is running at http://localhost:8123/
webpack output is served from /
Content not from webpack is served from ./demo
404s will fallback to /index.html
Unable to open browser. If you are running in a headless environment, please do not use the open flag.
Hash: fe2d96361454944eaee0
Version: webpack 3.10.0
Time: 1079ms
        Asset       Size  Chunks                    Chunk Names
    bundle.js     325 kB       0  [emitted]  [big]  main
bundle.js.map     384 kB       0  [emitted]         main
   index.html  320 bytes          [emitted]         
   [2] multi (webpack)-dev-server/client?http://localhost:8123 ./src/index.js 40 bytes {0} [built]
   [3] (webpack)-dev-server/client?http://localhost:8123 7.95 kB {0} [built]
   [4] ./node_modules/url/url.js 23.3 kB {0} [built]
   [7] ./node_modules/url/util.js 314 bytes {0} [built]
   [8] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
  [11] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [12] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
  [13] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [14] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
  [15] ./node_modules/sockjs-client/dist/sockjs.js 181 kB {0} [built]
  [16] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [18] ./node_modules/html-entities/index.js 231 bytes {0} [built]
  [21] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [23] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [25] ./src/index.js 624 bytes {0} [built] [failed] [1 error]
    + 11 hidden modules

ERROR in ./src/index.js
Module build failed: SyntaxError: Unexpected token (24:16)

  22 | // });
  23 | 
> 24 | ReactDOM.render(<App />, document.getElementById('root'));
     |                 ^
  25 | 

 @ multi (webpack)-dev-server/client?http://localhost:8123 ./src/index.js
webpack: Failed to compile.

有什么建议可以解决这个问题吗？

来自index.js的代码如下:

import 'normalize.css/normalize.css';
import 'box-sizing.css/box-sizing.css';
import './bl-ui/css/main.css';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './bl-ui/App';

ReactDOM.render(<App />, document.getElementById('root'));

我尝试设置codesandbox:https://codesandbox.io/s/fast-breeze-o633v但我需要修复index.js 中的错误。

Answer 1

我也有同样的问题，什么时候切换到parcel而不是webpack。这是我的index.js文件代码，请将“root”替换为“app”。

import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
<React.StrictMode>
 <App />
</React.StrictMode>,
document.getElementById('app')
);

我认为它现在工作正常。

这是我的 package.json 文件

{
  "name": "parceljs APP Data",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel serve src/index.html",
    "build": "parcel build src/index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.9.6",
    "@babel/preset-react": "^7.9.4",
    "parcel-bundler": "^1.12.4"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}