Неожиданный токен '<' Сборка React Webpack - PullRequest
Новая
       12

Неожиданный токен '<' Сборка React Webpack

2 голосов
/ 30 сентября 2019

Я использую Webpack4 и @ babel / core 7 для своего проекта ReactJs. Когда я пытаюсь создать проект, на терминале появляется 1001 *

ОШИБКА в ./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">
        ^

Package.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"]
  }

1 Ответ

0 голосов
/ 30 сентября 2019

Вам нужно добавить пресетную реакцию на ваш файл .babelrc следующим образом 

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

Если это не так, вы можете проверить их документ здесь

...