Unexpected token '<' React Webpack build

Question

I'm Using Webpack4 and @babel/core 7 for my ReactJs Project.When i trying to build project i'm getting bellow error on terminal

ERROR in ./src/views/Pages/Login/Login.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: /xx/xx/web/src/views/Pages/Login/Login.js: Unexpected token (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"]
  }

Where does it mention < in the Error message you have posted? — Tim B James
You might need to add @babel/preset-react to the options in your webpack.config.json as well — mousetail

Tony Ngo Tony Ngo · Accepted Answer · 2019-09-30T10:42:48

You need to add preset react to your .babelrc file like this

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

If that is not the case you can check their document here

Unexpected token '<' React Webpack build

1 Answers