SyntaxError:意外的标识符导入React(Javascript) [英] SyntaxError: Unexpected identifier importing React (Javascript)
问题描述
运行命令"npm run start"后，出现此错误:
After running the command 'npm run start' i get this error:
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.
I've tried to upgrade dependencies, and change the webpack.config.js.
HTML(没什么花哨的东西)
Html (nothing too fancy)
<!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脚本和依赖项
package.json scripts and dependencies
"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
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标识符未编译. 我会感谢您的帮助:)
I'm pretty sure that my project dependecies are correct but for some reason, the React identifier is not compiling. I would appreciate some help :)
推荐答案
问题是您的启动脚本(忽略了webpack配置):
The problem is your start script (that ignore the webpack configuration):
"start": "node ./Client/src/index.js"
应该考虑使用 webpack-dev-server 并执行类似的操作:
it should consider to use webpack-dev-server and do something like that:
"start": "webpack-dev-server --mode development",
这篇关于SyntaxError:意外的标识符导入React(Javascript)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
