React, babel, webpack not parsing jsx code

Question

webpack.config.js

module.exports = {
  context: __dirname + "/app",
  entry: {
    javascript: "./app.js",
    html: "./index.html",
  },
  resolve: {
   extensions: ['', '.js', '.jsx']
 },
  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]",
      },
    ],
  },
}

package.json

{
  "name": "react-webpack-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.0.15",
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "file-loader": "^0.8.4",
    "webpack": "^1.12.2"
  },
  "dependencies": {
    "react": "^0.14.2"
  }
}

app/app.js

import React from "react";
import Greeting from "./greeting";

React.render(
  <Greeting name="World"/>,
  document.body
);

I have seen the exact same questions after searching around, but none of the answers seemed to apply to me. I am getting the following error when running webpack :

ERROR in ./app.js
Module build failed: SyntaxError: path/to/project/react-webpack-project/app/app.js: Unexpected token (5:2)

React.render(
  <Greeting name="World"/>,
  document.body
);

I am not sure why I am getting this error still. I am guessing it has something to do with my webpack.config.js file, but not 100% what the problem is.

Did you try this solution ? [link](http://stackoverflow.com/questions/33460420/babel-loader-jsx-syntaxerror-unexpected-token) — The Reason, Nov 03 '15 at 22:08
I think the problem is that you have multiple loaders defined; checkout my answer below -- I think that using a .babelrc file will do the trick! — JESii, Jan 02 '16 at 17:02

score 9 · Answer 1 · answered Dec 29 '15 at 20:17

9

You need to add presets to your babel-loader:

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

http://babeljs.io/docs/plugins/#presets

answered Dec 29 '15 at 20:17

Abhinav Singi

3,379
1
20
27

score 8 · Accepted Answer · edited May 23 '17 at 11:47

8

First of all: if you are using React v^0.14, you should render your code using React-Dom. https://www.npmjs.com/package/react-dom

Second, this should resolve your problem: babel-loader jsx SyntaxError: Unexpected token

edited May 23 '17 at 11:47

Community

1
1

answered Nov 03 '15 at 22:08

dandel

756
1
4
10

1

I was following a pluralsight tutorial that was using this method of packing. I will try to follow along using this new way of packing it looks like. I couldn't get it to work even following the directions in the 2nd link. – httpNick Nov 04 '15 at 05:26
Too bad :(. Let's try something: try to use a Babel version lower than 6.0.0 – dandel Nov 04 '15 at 15:56
1

the second link didn't help me either. Is there a complete webpack/jsx/react hello world anywhere? – dranxo Nov 15 '15 at 04:40

score 5 · Answer 3 · edited May 23 '17 at 11:54

5

I'm currently using React 0.14.3. The ReactDOM solution did not work, nor did adding the babel presets into the webpack.config.js. Basically, those solutions appear to work only if you have a single loader defined, but I had both the babel-loader as well as the react-hot loader.

What DID work was to install the babel react presets module:

npm install babel-preset-react

and then create a .babelrc file in my project directory with the following:

{
  "presets": ['react']
}

This is documented at http://babeljs.io/docs/plugins/preset-react/, as pointed to by Abhinav Singi

edited May 23 '17 at 11:54

Community

1
1

answered Jan 02 '16 at 17:01

JESii

4,678
2
39
44

Ive been trying for hours, thanks this solved it for me. – loekTheDreamer Dec 14 '16 at 14:38

score 1 · Answer 4 · answered Jun 11 '16 at 21:41

1

For me the answer was to include the presets in the query block:

query: {
  presets: ['react', 'es2015']
}

answered Jun 11 '16 at 21:41

JoeTidee

24,754
25
104
149

score 0 · Answer 5 · answered Jan 10 '16 at 11:39

this is help me to solved that issue.

create new file .babelrc on same directory webpack.config.js. Add this to .babelrc

  {
  "stage": 2,
  "env": {
    "development": {
      "plugins": [
        "react-display-name",
        "react-transform"
      ],
      "extra": {
        "react-transform": {
          "transforms": [{
            "transform": "react-transform-hmr",
            "imports": ["react"],
            "locals":  ["module"]
          }]
        }
      }
    }
  }
}

React, babel, webpack not parsing jsx code

5 Answers5

Linked