意外的令牌 '<' React Webpack 构建答案

【问题标题】：Unexpected token '<' React Webpack build意外的令牌 '<' React Webpack 构建
【发布时间】：2020-01-29 15:12:12
【问题描述】：

我正在为我的 ReactJs 项目使用 Webpack4 和 @babel/core 7。当我尝试构建项目时，我在终端上遇到以下错误

./src/views/Pages/Login/Login.js 中的错误模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：语法错误： /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"]
  }

【问题讨论】：

在您发布的错误消息中哪里提到了<？
您可能还需要将@babel/preset-react 添加到 webpack.config.json 中的选项中

标签： javascript reactjs webpack babeljs

【解决方案1】：

您需要像这样将预设反应添加到您的 .babelrc 文件中

{
  "presets": ["es2015", "react"],
  "plugins": [
    "transform-es2015-destructuring",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ]
}

如果不是这样，您可以查看他们的文档here

【讨论】：