babel-loader jsx SyntaxError: Unexpected token

Question

I'm a beginner in React + Webpack.

I found a weird error in my hello world web app.

I'm using babel-loader in webpack to help me convert jsx into js, but it seems like babel can't understand jsx syntax.

Here are my dependencies:

"devDependencies": {
  "babel-core": "^6.0.14",
  "babel-loader": "^6.0.0",
  "webpack": "^1.12.2",
  "webpack-dev-server": "^1.12.1"
},
"dependencies": {
  "react": "^0.14.1"
}

Here is my webpack.config.js

var path = require('path');
module.exports = {
  entry: ['webpack/hot/dev-server',path.resolve(__dirname, 'app/main.js')],
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
      loaders: [
          { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
      ]
  }
};

Here is my app/main.js

var React = require("react");
React.render(<h1>hello world</h1>,document.getElementById("app"));

And this is the error message

ERROR in ./app/main.js
Module build failed: SyntaxError: ~/**/app/main.js: Unexpected token (2:13)
  1 | var React = require("react");
> 2 | React.render(<h1>hello world</h1>,document.getElementById("app"));
    |              ^
at Parser.pp.raise (~/**/node_modules/babylon/lib/parser/location.js:24:13)

Thanks for you guys.

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

score 470 · Accepted Answer · edited Apr 23 '18 at 02:49

470

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']
        }
      }
    ],
  }

edited Apr 23 '18 at 02:49

Liran H

9,143
7
39
52

answered Nov 01 '15 at 09:05

Yoon

4,903
1
16
9

5

Another question, if i want to use ES6 Syntax in future, should I install babel-preset-es2015 and do some options in config file in the same way? – Keyu Lin Nov 01 '15 at 15:28
51

You got it. `presets:['es2015','react']` – Yoon Nov 01 '15 at 19:21
1

I'm trying to follow this but I still get the error. Could you post a complete package.json, and webpack.config.js, main.js "hello world"? – dranxo Nov 15 '15 at 04:43
5

@dranxo https://github.com/helols/so-hello-world – Yoon Nov 16 '15 at 15:29
@dranxo did you find a solution? I've tried everything on this page and still have the same error – baylee Apr 12 '16 at 00:35
I didn't. Ended up using a lower version of React – dranxo Apr 12 '16 at 00:39
1

@dranxo @baylee I noticed an error in this solution. The test only works for files ending in '.js'. So if your file ends in '.jsx', it won't match. The regex should actually be: `test: /\.jsx?/` This would match both .js and .jsx files. – Ringo Jun 02 '16 at 08:24
I've edited the regex in the answer, so hopefully it'll get accepted. I'm guessing a lot of people use the .jsx file extension, so this will probably help them. – Ringo Jun 02 '16 at 08:30
4

I don't know why, but seemingly the order matters in: presets:['es2015','react'] I was trying it with presets:['react','es2015'] and it failed – Nick Jul 18 '16 at 09:57
@Corstin Boerman your edit is not very good, you don't say what the change is and what its impact is – Keith Nicholas Oct 03 '16 at 03:47
1

I was missing `.babelrc` because it was in the .gitignore of my project for some reason. – Burak Tokak Mar 07 '17 at 10:21
1

This should now be: `presets: ['@babel/preset-env', '@babel/preset-react']` – nnyby Dec 03 '19 at 16:18
@nnyby your presets array did not work, do you have other suggestions? – reZach Jan 01 '20 at 03:51
In my case, I had to use presets: ['@babel/react'] instead ['react']. Thanks to you I solved my problem – Rocco Apr 17 '20 at 03:06

svnm · Answer 2 · 2016-11-15T23:52:58.030

104

I ran into a similar issue when migrating from babel 5 to babel 6.

I was just running babel to compile the src to lib folder babel src --out-dir lib

I will share my setup for babel 6:

Ensure you have the following babel 6 devDependencies installed

"babel-core": "^6.7.6",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0"

Add your .babelrc file to the project:

{
  "presets": ["es2015", "stage-0", "react"]
}

edited Nov 15 '16 at 23:52

answered Dec 31 '15 at 01:03

svnm

22,878
21
90
105

4

The need for es2015 when using stage-0 was a great catch. – Joshua Ball Jan 06 '16 at 05:33
Was getting an error for unknown syntax at `export App from './App'` - realized I needed stage-0, thanks for this. – steezeburger Jul 19 '16 at 00:55
I have an example setup for react, babel and webpack [here](https://github.com/StevenIseki/react-webpack-example) it also includes enzyme for testing css modules and universal rendering. – svnm Nov 15 '16 at 23:54
1

this worked for me without stage-0 – Amol Pujari Feb 14 '17 at 16:49
2

It works for me. I did not have stage-0 in devDependencies. – J C Jan 30 '18 at 21:55
I had to put it in webpack.config.js. In the array module.rules, where it says "loader: 'babel-loader', i added this: query: { presets: ['es2015', 'react', 'stage-0'] } – GabrielBB Mar 02 '18 at 13:57
I ran into this problem the stage-0 was the trick in my webpack config. – Merovex Mar 10 '18 at 11:09

score 40 · Answer 3 · edited May 23 '17 at 12:18

Since the answer above still leaves some people in the dark, here's what a complete webpack.config.js might look like:

var path = require('path');
var config = {
    entry: path.resolve(__dirname, 'app/main.js'),
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            loader: 'babel',
            query:
            {
                presets:['es2015', 'react']
            }
        }]
    },

};

module.exports = config;

score 26 · Answer 4 · answered May 06 '16 at 08:34

26

For me the solution was to create the file .babelrc with this content:

{
  "presets": ["react", "es2015", "stage-1"]
}

answered May 06 '16 at 08:34

albanx

6,193
9
67
97

score 23 · Answer 5 · edited Sep 22 '17 at 11:02

23

The following way has helped me (includes react-hot, babel loaders and es2015, react presets):

loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loaders: ['react-hot', 'babel?presets[]=es2015&presets[]=react']
      }
]

edited Sep 22 '17 at 11:02

ubuntugod

592
7
16

answered Jan 01 '16 at 18:29

Vladyslav Babenko

1,349
18
26

1

This helped me when I was following the Django plus React stuff in this link: http://owaislone.org/blog/webpack-plus-reactjs-and-django/ This is (I presume) an alternative to using a .babelrc file as mentioned above. – Doddie Mar 07 '16 at 15:41
this also helped me even though my error is not the same as the original question. – episodeyang Mar 11 '16 at 07:22
I had to delete '?presets[]=es2015&presets[]=react'. Adding 'state-0' into .babelrc helped to fix problem. – Jaro May 17 '16 at 00:47

score 2 · Answer 6 · answered Oct 12 '16 at 06:20

2

For those who still might be facing issue adding jsx to test fixed it for me

test: /\.jsx?$/,

answered Oct 12 '16 at 06:20

Aftab Naveed

3,652
3
26
40

literally for days I've been trying to resolve this with every conceivable change to gulpfile.js, ...and it was this simple – Neville Apr 23 '20 at 17:36

score 1 · Answer 7 · answered Nov 18 '16 at 13:02

1

This works perfect for me

{
    test: /\.(js|jsx)$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
        presets: ['es2015','react']
    }
},

answered Nov 18 '16 at 13:02

jose920405

7,982
6
45
71

score 0 · Answer 8 · answered Mar 15 '16 at 13:34

You can find a really good boilerplate made by Henrik Joreteg (ampersandjs) here: https://github.com/HenrikJoreteg/hjs-webpack

Then in your webpack.config.js

var getConfig = require('hjs-webpack')

module.exports = getConfig({
  in: 'src/index.js',
  out: 'public',
  clearBeforeBuild: true,
  https: process.argv.indexOf('--https') !== -1
})

babel-loader jsx SyntaxError: Unexpected token

` looks a little peculiar...

8 Answers8

Linked

Related