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  lt h1 gt hello world lt  h1 gt  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     gt  2   React render  lt h1 gt hello world lt  h1 gt  document getElementById  app                          at Parser pp raise       node modules babylon lib parser location js 24 13    Thanks for you guys

User · Answer

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

_x000D_

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

_x000D_

User · Answer

This works perfect for me        test      js jsx         loader   babel-loader       exclude   node modules       query            presets    es2015   react

User · Answer

For me the solution was to create the file  babelrc with this content        presets     react    es2015    stage-1

User · Answer

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

User · Answer

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 amp presets   react

User · Answer

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

User · Answer

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

User · Answer

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

[javascript] babel-loader jsx SyntaxError: Unexpected token

Examples related to javascript

Examples related to reactjs

Examples related to webpack

Examples related to babeljs