SyntaxError：意外的标识符导入反应（Javascript）[重复]
Posted
技术标签:
【中文标题】SyntaxError：意外的标识符导入反应（Javascript）[重复]【英文标题】：SyntaxError: Unexpected identifier importing React (Javascript) [duplicate] 【发布时间】：2019-12-08 19:33:31 【问题描述】：运行命令“npm run start”后出现此错误：
import React from 'react';
^^^^^
SyntaxError: Unexpected identifier
at Module._compile (internal/modules/cjs/loader.js:721:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
我已尝试升级依赖项，并更改 webpack.config.js。
html（没什么花哨的）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import FormContainer from './js/components/container/FormContainer.jsx';
ReactDOM.render(<FormContainer />, document.getElementById('root'));
serviceWorker.unregister();
.babelrc
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
package.json 脚本和依赖项
"scripts":
"webpack": "webpack",
"dev": "npm run webpack",
"build": "npm run webpack",
"start": "node ./Client/src/index.js"
...
"devDependencies":
"@babel/core": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"css-loader": "^3.1.0",
"prop-types": "^15.7.2",
"webpack": "^4.38.0",
"webpack-cli": "^3.3.6"
,
"dependencies":
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-do-expressions": "^7.0.0",
"@babel/plugin-proposal-export-default-from": "^7.0.0",
"@babel/plugin-proposal-export-namespace-from": "^7.0.0",
"@babel/plugin-proposal-function-bind": "^7.0.0",
"@babel/plugin-proposal-function-sent": "^7.0.0",
"@babel/plugin-proposal-json-strings": "^7.0.0",
"@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
"@babel/plugin-proposal-numeric-separator": "^7.0.0",
"@babel/plugin-proposal-optional-chaining": "^7.0.0",
"@babel/plugin-proposal-pipeline-operator": "^7.0.0",
"@babel/plugin-proposal-throw-expressions": "^7.0.0",
"@babel/plugin-syntax-dynamic-import": "^7.0.0",
"@babel/plugin-syntax-import-meta": "^7.0.0",
"express": "^4.17.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"to-string-loader": "^1.1.5"
webpack.config.js
module.exports =
entry:"./client/src/index.js",
module:
rules: [
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use:
loader: "babel-loader"
,
test: /\.css$/i,
use: ['to-string-loader', 'css-loader']
,
test: /\.[name]$/,
use:
loader: "to-string-loader"
]
;
我很确定我的项目依赖项是正确的，但由于某种原因，React 标识符没有编译。 我会很感激一些帮助:)
【问题讨论】：
我有一些 .jsx 文件，但它们没有任何问题。非常简单的代码。npm start 脚本包含什么
其实是 npm run start (sorry...)
看起来好像它无法识别 import 声明的内容。也许检查这个线程：github.com/facebook/react/issues/14399
"package.json dependencies" — 依赖项很有用，但您需要向我们展示脚本部分，以便我们知道您的 start 脚本实际上做了什么。
【参考方案1】：
问题是你的启动脚本（忽略 webpack 配置）：
"start": "node ./Client/src/index.js"
它应该考虑使用 webpack-dev-server 并做类似的事情：
"start": "webpack-dev-server --mode development",
【讨论】：
【参考方案2】：["@babel/preset-env", "modules": false],
您正在使用 ES6 模块，但在您的 Babel 配置中使用 you turned off support for modules。
删除该规则。
"presets": ["@babel/preset-env", "@babel/preset-react"]
【讨论】：
这样做，同样的错误...：/以上是关于SyntaxError：意外的标识符导入反应（Javascript）[重复]的主要内容，如果未能解决你的问题，请参考以下文章
SyntaxError：Chrome Javascript 控制台中的意外标识符
Node.js SyntaxError：设置 Forge 查看器时出现意外标识符