Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RHL not working with Babel plugin ES2015 #410

Closed
tiberiumaxim opened this issue Nov 7, 2016 · 4 comments
Closed

RHL not working with Babel plugin ES2015 #410

tiberiumaxim opened this issue Nov 7, 2016 · 4 comments

Comments

@tiberiumaxim
Copy link

tiberiumaxim commented Nov 7, 2016

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.

@calesce
Copy link
Collaborator

calesce commented Nov 7, 2016

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 }].

@tiberiumaxim
Copy link
Author

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.

@calesce
Copy link
Collaborator

calesce commented Nov 12, 2016

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.

@calesce calesce closed this as completed Nov 12, 2016
@patrikholcak
Copy link

Added a note to readme

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants