Babel/webpack not reading jsx

Question

Having a bit of trouble with my react/webpack set up, the first bit of JSX it hits, I "Unexpected Token" - as in the first < in the JSX . Here is my Webpack config :

 const path = require('path');

 const webpack = require('webpack');

module.exports = {
entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './app/index.jsx'
],
module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
    }]
},
resolve: {
    extensions: ['', '.js', '.jsx']
},
output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: 'bundle.js'
},
devServer: {
    contentBase: './dist',
    hot: true
},
plugins: [
    new webpack.HotModuleReplacementPlugin()
]

};

I noticed if i swap the loaders to use react-hot, it no longer knows how to read the es6 imports :

  module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        include: path.join(__dirname, 'src'),
        loader: 'react-hot!babel'
    }]
},

(gives the error - Unexpected token You may need an appropriate loader to handle this file type. Referencing the import lines )

Unsure what I am missing here, could use a some help. Thanks!

Timon Timon · Accepted Answer · 2015-11-11T18:28:54

If you're using Babel 6.0, it won't transpile your code by default anymore. (https://babeljs.io/blog/2015/10/29/6.0.0/), it says:

Since Babel is focusing on being a platform for JavaScript tooling and not an ES2015 transpiler, we’ve decided to make all of the plugins opt-in. This means when you install Babel it will no longer transpile your ES2015 code by default.

You need to install two presets if you want to transpile your code:

npm install --save-dev babel-preset-es2015 babel-preset-react

In your webpack.config.js you can then specify to use the presets like the following:

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

Babel/webpack not reading jsx

2 Answers