React-hot-loader: RHL not working with Babel plugin ES2015

Created on 7 Nov 2016  路  4Comments  路  Source: gaearon/react-hot-loader

I'm trying to integrate RHL @3.0.0-beta.6 to my project and I ended up stripping it to something similar to this example https://github.com/patrikholcak/hot-loader-demo

I have my babel settings in .babelrc as follows:

    {
    "presets": ["react", "stage-2", "es2015"],
    "plugins": ["react-hot-loader/babel", "transform-runtime", "array-includes", "transform-object-assign", "transform-decorators-legacy"]
    }

The app renders and there is no error. But when I try to modify something in my App component, it doesn't visually update.
What's weird is that the console actually prints the update was successful

[HMR] connected
[HMR] bundle rebuilding
[HMR] bundle rebuilt in 793ms
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./src/components/App.js
[HMR] App is up to date.

I ended up changing my .babelrc to be exactly the same as @patrikholcak 's example and I noticed that when I was excluding es2015 from the plugins array, the component was getting updated properly.

Anyone has a clue about this issue? Cheers!

EDIT: The simplest way to reproduce this is to clone the demo repo and add es2015 preset in package.json.

Most helpful comment

Added a note to readme

All 4 comments

Weird, we've been having problems when not including babel-preset-es2015, see #313.

This looks like it has something to do with Webpack 2's native ES2015 modules and how Babel transpiles ES2015 modules. I added es2015/stage-2 to that repo's babel config, reproduced the issue, and fixed it by changing it to ["es2015", { "modules": false }].

Thanks @calesce. It worked. But after running my project (not the demo) the console started being bitchy about inexistent imported constants and other things. I can't say it wasn't right, but I don't know why it didn't do this before this update to my app.
Anyway, thanks for taking a look and for the fix.

Ok, just checked, and if you don't opt out of Babel transpiling ES2015, you'll need to re-require the root component like here. I'm going to add a section to the docs so that's more clear.

Added a note to readme

Was this page helpful?
0 / 5 - 0 ratings

Related issues

theKashey picture theKashey  路  3Comments

JamesIves picture JamesIves  路  4Comments

jljorgenson18 picture jljorgenson18  路  3Comments

mattkrick picture mattkrick  路  3Comments

adesmet picture adesmet  路  4Comments