Using react-hot-loader with Babel 6

Question

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?

score 4 · Accepted Answer · answered Feb 18 '16 at 09:55

4

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.

answered Feb 18 '16 at 09:55

mguijarr

7,641
6
45
72

Thanks, it works! What about plugins? I am running into this issue: http://stackoverflow.com/questions/33801311/webpack-babel-6-es6-decorators/34210231#34210231 – Cheng Feb 18 '16 at 10:08
Nevermind, I got it: `loaders: ['react-hot', 'babel?cacheDirectory,presets[]=react,presets[]=es2015,presets[]=stage-0,plugins[]=transform-decorators-legacy'],` – Cheng Feb 18 '16 at 10:17
1

For complicated query, use [`webpack-combine-loaders`](https://github.com/jsdf/webpack-combine-loaders). – Rockallite Jun 30 '16 at 01:36

Using react-hot-loader with Babel 6

1 Answers1