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

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

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

User · Answer

This works perfect for me        test      js jsx         loader   babel-loader       exclude   node modules       query            presets    es2015   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

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

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

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   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   x000D   x000D

[javascript] babel-loader jsx SyntaxError: Unexpected token

Examples related to javascript

Examples related to reactjs

Examples related to webpack

Examples related to babeljs