React, babel, webpack not parsing jsx code

Question

webpack.config.js

module.exports = {
  context: __dirname + \"/app\",
  entry: {
    javascript: \"./app.js\",
    html: \"./index.html\",
  },
  resolve: {
         


        

Answer 1

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

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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"]
          }]
        }
      }
    }
  }
}