javascript - 意外的令牌 '<' React Webpack 构建
问题描述
我正在为我的 ReactJs 项目使用 Webpack4 和 @babel/core 7。当我尝试构建项目时,我在终端上遇到以下错误
./src/views/Pages/Login/Login.js 中的错误模块构建失败(来自 ./node_modules/babel-loader/lib/index.js):SyntaxError: /xx/xx/web/src/views/Pages/ Login/Login.js:意外令牌 (8:6)
render() { return ( <div className="app flex-row align-items-center"> ^
包.json
"dependencies": {
"@babel/core": "^7.4.0",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/preset-env": "^7.4.2",
"@babel/preset-react": "^7.0.0",
"@coreui/coreui": "2.1.12",
"@coreui/coreui-plugin-chartjs-custom-tooltips": "1.3.1",
"@coreui/icons": "0.3.0",
"@coreui/react": "2.5.1",
"@devexpress/dx-react-core": "2.0.2",
"@devexpress/dx-react-grid": "2.0.2",
"@devexpress/dx-react-grid-bootstrap4": "2.0.2",
"axios": "0.19.0",
"bootstrap": "4.3.1",
"babel-loader": "8.0.5",
"copy-webpack-plugin": "5.0.4",
"css-loader": "2.1.1",
"dotenv-webpack": "1.7.0",
"file-loader": "4.1.0",
"chart.js": "2.8.0",
"core-js": "3.1.4",
"html-webpack-plugin": "3.2.0",
"image-webpack-loader": "5.0.0",
"node-sass": "4.12.0",
"node-sass-chokidar": "1.3.4",
"npm-run-all": "4.1.5",
"mini-css-extract-plugin": "0.8.0",
"optimize-css-assets-webpack-plugin": "5.0.3",
"prop-types": "15.7.2",
"react": "16.8.6",
"react-chartjs-2": "2.7.6",
"react-redux": "7.1.0",
"react-router-dom": "5.0.1",
"reactstrap": "8.0.0",
"redux": "4.0.4",
"style-loader": "0.23.1",
"terser-webpack-plugin": "1.4.1",
"webpack": "4.29.6",
"webpack-cli": "3.3.0"
}
Webpack.config.js
module: {
rules: [
{
test: /\.(js|jsx|es6)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"]
}
}
],
},
......
]
}
.babelrc
{
"presets": [ "@babel/preset-env","@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties","@babel/transform-runtime"]
}
解决方案
您需要像这样将预设反应添加到您的 .babelrc 文件中
{
"presets": ["es2015", "react"],
"plugins": [
"transform-es2015-destructuring",
"transform-object-rest-spread",
["transform-class-properties", { "spec": true }]
]
}
如果不是这种情况,您可以在此处查看他们的文档