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 :)

Can you update the question to show the full code of the file having that error message?? — Balanced02, Sep 25 '18 at 19:01
I actually meant the code of the file and not the full error message. It seems more like you have an unclosed tag though, but upload the full code and let's see where the error is coming from — Balanced02, Sep 25 '18 at 19:18
It's not possible because yesterday the code worked. And today i don't know why write it me error code :/ i wrote that problem is somewhere in babel-loader but i found just old posts. I think that i have somethink wrong in babel presets. — d3tr1tus, Sep 25 '18 at 19:22
Please help me someone. I am trying to fix it almost 3 days and i don't see any move forward :( — d3tr1tus, Sep 26 '18 at 08:51
@MichalCholewiński here is my code https://github.com/d3tr1tus/eshop-test-react — d3tr1tus, Sep 26 '18 at 09:28

score 9 · Accepted Answer · answered Sep 26 '18 at 11:21

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://d3tr1tus@bitbucket.org/d3tr1tus/eshop_frontend_template.git"
  },
  "keywords": [],
  "author": "Filip Březina <filip.brezina11@gmail.com> (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
    }
};

No problem :) it's nice to help other. You can mark this answer as useful if You want to :) — Michal Cholewiński, Sep 26 '18 at 14:14
For newer versions of react , use the new babel modules : https://stackoverflow.com/a/53927457/6665568 . It has better error messages and supports new features of react. — Natesh bhat, Dec 26 '18 at 04:39

score 1 · Answer 2 · answered Dec 26 '18 at 04:41

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.

Works like a charm for me! Thank you so much. – Diego Fortes May 16 '20 at 03:04 — Diego Fortes, May 16 '20 at 03:04

score 0 · Answer 3 · answered May 07 '20 at 22:08

0

In my case, I only needed the file .babelrc :

{
 "presets": ["react"]
}

answered May 07 '20 at 22:08

aarkerio

2,183
2
20
34

React Unexpected token < - babel loader

3 Answers3

Here's an easy fix :