React Unexpected token < - babel loader

Question

Hi i have problem with babel-loader it write me

ERROR in ./src/js/pages/Admin/views/Pages/Register/Register.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\Projekty\eshop_frontend_template\src\js\pages\Admin\views\Pages\Register\Register.js: Unexpected token (7:6)

>  5 |   render() {
   6 |     return (
>  7 |       <div className="app flex-row align-items-center">
     |       ^
   8 |         <Container>
   9 |           <Row className="justify-content-center">
  10 |             <Col md="6">
at Parser.raise (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:3939:15)
at Parser.unexpected (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5248:16)
at Parser.parseExprAtom (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:6328:20)
at Parser.parseExprSubscripts (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5924:21)
at Parser.parseMaybeUnary (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5903:21)
at Parser.parseExprOps (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5812:21)
at Parser.parseMaybeConditional (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5784:21)
at Parser.parseMaybeAssign (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:5731:21)
at Parser.parseParenAndDistinguishExpression (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:6474:28)
at Parser.parseExprAtom (C:\Projekty\eshop_frontend_template\node_modules\@babel\parser\lib\index.js:6284:21)
 @ ./src/js/pages/Admin/views/Pages/index.js 37:39-60
 @ ./src/js/pages/Admin/Admin.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js


   5 |   render() {
   6 |     return (
>  7 |       <div className="app flex-row align-items-center">
     |       ^
   8 |         <Container>
  10 |             <Col md="6">

my webpack.config.js

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                loader: 'babel-loader',
                options: {
                    plugins: ['@babel/proposal-class-properties']
                }
            }
        },
        { test: /\.css$/, loader: "style-loader!css-loader" },
        { test: /\.json$/, loader: "json-loader" },
        { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?        limit=100000' },
        {
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }
    ]
},
resolve: {
    extensions: ['*', '.js', '.jsx']
},
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
        template: './dist/index.html'
    })
],

my package.json#babel

"babel": {
"presets": [
  [
    "@babel/preset-env",
    {
      "modules": "commonjs",
      "targets": {
        "node": "current"
      }
    }
  ],
  "@babel/preset-react"
],
"plugins": [
  [
    "@babel/plugin-proposal-decorators",
    {
      "legacy": true
    }
  ]
]
  },

my dependencies

"devDependencies": {
"@babel/core": "^7.1.0",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.2",
"css-loader": "^1.0.0",
"react-hot-loader": "^4.3.11",
"style-loader": "^0.23.0",
"webpack": "^4.20.1",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.1.9"
  },
  "dependencies": {
"@babel/plugin-proposal-class-properties": "^7.1.0",
"@babel/plugin-proposal-decorators": "^7.1.0",
"@babel/polyfill": "^7.0.0",
"@coreui/coreui": "^2.0.9",
"@coreui/react": "^2.0.5",
"axios": "^0.18.0",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"flag-icon-css": "^3.2.0",
"font-awesome": "^4.7.0",
"html-webpack-plugin": "^3.2.0",
"json-loader": "^0.5.7",
"node-sass": "^4.9.3",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-localize-redux": "^3.4.0",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"redux-localstorage-simple": "^2.1.4",
"redux-logger": "^3.0.6",
"redux-promise-middleware": "^5.1.1",
"redux-thunk": "^2.3.0",
"sass-loader": "^7.1.0",
"simple-line-icons": "^2.4.1",
"style-loader": "^0.23.0",
"universal-cookie": "^3.0.4"
  }

I tried some helps on forums but nothing helped. Can you say me please what i have wrong?

I am using Babel 7

Thank you :)

Answer 1

I checked on my notebook, You have just lot of entries missing in package.json and You are using not supported features. After changing these files run 'npm install' and npm start should wotk :)

package.json

{
  "name": "eshop_frontend_template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "build": "webpack -p --progres --config ./webpack.config.js --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://[email protected]/d3tr1tus/eshop_frontend_template.git"
  },
  "keywords": [],
  "author": "Filip Březina <[email protected]> (localhost:8080)",
  "license": "MIT",
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "react-hot-loader": "^4.3.11",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.20.1",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.9"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-proposal-decorators": "^7.1.0",
    "@babel/polyfill": "^7.0.0",
    "@coreui/coreui": "^2.0.9",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.2.0",
    "@coreui/react": "^2.0.5",
    "axios": "^0.18.0",
    "chart.js": "^2.7.2",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "flag-icon-css": "^3.2.0",
    "font-awesome": "^4.7.0",
    "json-loader": "^0.5.7",
    "node-sass": "^4.9.3",
    "react": "^16.5.2",
    "react-chartjs-2": "^2.7.4",
    "react-dom": "^16.5.2",
    "react-loadable": "^5.5.0",
    "react-localize-redux": "^3.4.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "reactstrap": "^6.4.0",
    "redux": "^4.0.0",
    "redux-localstorage-simple": "^2.1.4",
    "redux-logger": "^3.0.6",
    "redux-promise-middleware": "^5.1.1",
    "redux-thunk": "^2.3.0",
    "sass-loader": "^7.1.0",
    "simple-line-icons": "^2.4.1",
    "style-loader": "^0.23.0",
    "universal-cookie": "^3.0.4"
  }
}

webpack.config.js

const webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: "./src/index.js",
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env','@babel/react'],
                        plugins: ['@babel/proposal-class-properties', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-dynamic-import']
                    }
                }
            },
            { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]},
            { test: /\.json$/, loader: "json-loader" },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
            {
                test: /\.scss$/,
                use: [
                    "style-loader", // creates style nodes from JS strings
                    "css-loader", // translates CSS into CommonJS
                    "sass-loader" // compiles Sass to CSS, using Node Sass by default
                ]
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: './dist/index.html'
        })
    ],
    devServer: {
        contentBase: './dist',
        hot: true
    }
};

Answer 2

I found that the error is because of older version of babel which doesn't handle newer versions of react code.

Here's an easy fix :

My problem was of older babel version fixed easily by installing :

npm i @babel/plugin-proposal-class-properties @babel/preset-react @babel/preset-env @babel/core @babel/plugin-transform-runtime --save-dev

In .babelrc file (or in package.json inside "babel" : ) :

{
   "presets": [
       "@babel/react" , 
       "@babel/env" , 
   ],
   "plugins": [
       "@babel/plugin-proposal-class-properties"
   ]
}

Now babel built it successfully after this.