React Unexpected token < - babel loader

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

Upvotes: 6

Answers (3)

aarkerio

Reputation: 2354

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

{
 "presets": ["react"]
}

Upvotes: 0

Natesh bhat

Reputation: 13192

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.

Upvotes: 1

Michal Cholewiński

Reputation: 464

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
    }
};

Upvotes: 9

React Unexpected token &lt; - babel loader

Answers (3)

Here's an easy fix :

Related Questions

React Unexpected token < - babel loader