babel-loader jsx SyntaxError: Unexpected token [du

问题:

This question already has an answer here:

• Babel file is copied without being transformed 8 answers

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.

回答1:

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

回答2:

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

回答3:

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;

回答4:

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

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

回答5:

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

回答6:

This works perfect for me

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

回答7:

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

回答8:

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

test: /\\.jsx?$/,