Search code examples
javascriptwebpackbabeljsreact-hot-loader

Using react-hot-loader with Babel 6

I have upgraded to Babel 6 and trying to make it working with react-hot-loader, in the webpack.config file, I have this:

    loaders: [{
        test: /\.js$/,
        loaders: ['react-hot', 'babel'],
        include: path.join(__dirname, 'app'),
        query: {
            presets: ['react', 'es2015', 'stage-0']
        }
    }

The config above gives this error:

Cannot define 'query' and multiple loaders in loaders list"

Webpack is probably confused whether if the query is for react-hot-loader or babel.

How can I work around this issue?

Solution

  • Here is an excerpt of the webpack.config.js file I use:

    loaders: [{
  test: /\.jsx?$/,
  loaders: ['react-hot', 'babel-loader?presets[]=react,presets[]=es2015,presets[]=stage-0']
}

    As you can see the presets for babel can be specified directly in the loaders section.