Babel-Loader Jsx Syntaxerror: Unexpected Token

babel-loader jsx SyntaxError: Unexpected token

Add "babel-preset-react"

npm install babel-preset-react

and add "presets" option to babel-loader in your webpack.config.js

(or you can add it to your .babelrc or package.js: http://babeljs.io/docs/usage/babelrc/)

Here is an example webpack.config.js:

{ 
    test: /\.jsx?$/,         // Match both .js and .jsx files
    exclude: /node_modules/, 
    loader: "babel", 
    query:
      {
        presets:['react']
      }
}

Recently Babel 6 was released and there was a major change:
https://babeljs.io/blog/2015/10/29/6.0.0

If you are using react 0.14, you should use ReactDOM.render() (from require('react-dom')) instead of React.render(): https://facebook.github.io/react/blog/#changelog

UPDATE 2018

Rule.query has already been deprecated in favour of Rule.options. Usage in webpack 4 is as follows:

npm install babel-loader babel-preset-react

Then in your webpack configuration (as an entry in the module.rules array in the module.exports object)

{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: ['react']
        }
      }
    ],
  }

React Unexpected token - babel loader

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

babel does not recognize jsx syntax... SyntaxError: Unexpected token (25:1)

add this to the rules' array in webpack.config.js and see if the problem is solved:

        {
            test: /\.jsx?/,
            include: APP_DIR,
            loader: 'babel-loader'
        }

Babel-Loader Syntax error on npm run build

The SyntaxError: Unexpected token ... implies that your node isn't transpiling ES6. Have you upgraded node/npm to relatively new versions?

Also, if you're changing versions, I would suggest deleting your node_modules folder and package-lock.json file before running npm install again.

---

Related Topics