React Hot Loader 3.0 beta demo

[gadicc]

See gaearon/react-hot-boilerplate#61.

Requires gadicc:ecmascript-hot@1.3.2-refactor.7.

Remove the old setup

1. npm rm --save-dev babel-plugin-react-transform react-transform-hmr react-transform-catch-errors

2. Remove the entire react-transform section from your client/.babelrc env block

3. Modify your package.json to have a section like:

   {
     "ecmascript-hot": {
       "transformStateless": {
         "pathMatch": "NOMATCH"
       }
     }
   }

Add the new setup

1. npm install --save-dev react-hot-loader@^3.0.0-beta.1 (check latest release)

2. In your project root .babelrc, make sure you have { "plugins": ["react-hot-loader/babel"] }

3. Modify your main client entry point / wherever you mount your root to resemble:

   import { AppContainer } from 'react-hot-loader';  // <-- add this line
   import Root from './containers/Root';  // example; wherever you keep your main component
   
   // Wherever you do this, probably in Meteor.startup()
   ReactDOM.render(
   <AppContainer
     component={Root}
     props={{ store }}     {/* if e.g. you're using redux */}
   />,
   document.getElementById('root')
   );
   
   // This section is new, the references to "containers/Root" should match your import statement
   if (module.hot) {
   module.hot.accept('./containers/Root', () => {
     const AppRoot = require('./containers/Root').default;
     render(
       <AppContainer>
         <AppRoot />
       </AppCotnainer>,
       document.getElementById('root')
     );
   });
   }

4. You need to import 'react-hot-loader/patch'; before importing React. If you have a single client entry-point and get everything else from imports, just add this as your first line. If you still use a "regular" client directory (with more than 1 file), try place just this line in a file called client/_patchReact.js (or possibly in client/lib if you use react from within that directory).

There's an (incredibly convoluted) example at https://github.com/gadicc/meteor-react-hotloader/tree/master/demo-rhl3.

There's also a mantra-sample-blog-app-hot example. Unfortunately default Mantra routing leads to a slightly weird pattern but it's not too bad.

[clayne11]

Very exciting!

[gadicc]

This works great :)

[gadicc]

Closing, this is the default in the upcoming release, fully documented and works great.

[tomitrescak]

When do you foreseee the next realese? Looking forward ;)

[clayne11]

I'm actually having trouble with this. I tried it yesterday and it seems like some of my components are no longer being hooked up to the redux store. My root component is also in a package and I'm not sure if that's causing issues but I couldn't seem to get it to hot reload.

I tried both module.hot.accept('./root-container.js', () => {}) and module.hot.accept('/node_modules/meteor/casalova:bootstrap/root-container.js', () => {}) and neither of them are hitting.

Did you test this with Meteor packages?

[gadicc]

@tomitrescak, should have an early experimental release out this weekend. Or you can run from master :)

@clayne11, what version / checkout are you using? There was an issue with hot loading the "new" way with the first release (if it still says "Hotloading with deps is not well tested" or something to that effect). I found a bug after that and fixed, and eventually removed the warning after I'd spent more time with it and it seemed good. Basically if checkout, 0b67248 should be good. My only upcoming changes now are to try remove binary deps to make it less of a pain to publish.

Re the store and packages, are you able to put it online? I'll take a look as soon as I've managed to actually publish the current code (iirc I managed to publish for linux, the build machines were driving me mad yesterday).

[clayne11]

I'm trying out refactor.5 and I'm having issue with the hot-reloading portion.

I had to remove the react-hot-loader/patch import or my code was getting into an infinite loop when a component was hooked up to the redux store. I figured I would test one thing at a time and so I isolated the hot reloading code and I'm having issue with it as well.

When I save a file, I'm getting the following error:

This is all within a Meteor package as well.

[gadicc]

Oops, re-opening this since I asked to track RHL-related stuff here.

That's strange about react-hot-loader/patch, but sure, let's do one thing at a time. IIRC you can't share your code but if I'm thinking about someone else I'm happy to take a look.

During the refactor I broke the support for Meteor packages. I just fixed this in gadicc:ecmascript-hot@=1.3.2-refactor.6. Hoping that's the issue here. (In my own project, the way I set up the packages is probably incompatible with RHLv3, but I think for a normal import/export situation it should work now).

Let me know.

[clayne11]

Your changes in refactor.6 fixed the error I posted in my previous comment. Now I have to debug the issue with react-hot-loader/patch causing an infinite loop.

[gadicc]

Some good news, at least :) Check the react-hot-loader repo if anyone has had a similar issue. If you have time to do it, and can reproduce in the react-hotloader-starter boilerplate (I think that's what it's called), I think that could help. Or even just to to establish whether it's the same thing in a clean project and whether or not ecmascript-hot has anything to do with it.

[clayne11]

I'm having a new issue now where the hot-reloading code in hot.js doesn't think that the file I changed is required by anything, but it is. My entire codebase hasn't been switched over to modules yet, there are still spots where I rely on Meteor "package globals". Would this stop the hot-reloader from working? I'm thinking it may well since the hot-reloader can't detect the dependencies.

[clayne11]

I think I found the issue. It looks like the hot-reloading code doesn't work across Meteor package boundaries.

In hot.js, modulesRequiringMe is built up by going through all the module dependencies and detecting what modules are required in what other modules.

The issue is that it doesn't seem to look at Meteor package imports. Within a Meteor package, the relative dependencies (./XXX) are detected, but when I then import that package in another Meteor package it doesn't build up the dependency graph properly.

[clayne11]

It seems like the common issue here is the Meteor package system. I'm thinking that the react-hot-loader babel transform doesn't run properly with Meteor packages because the dependency tree is pretty broken.

I'm starting the painful process of migrating my entire app over into the imports folder and using proper ES6 modules throughout rather than the hacky Meteor packages. It's going to be a lot of work but I think it'll be worth it in the end.

I transitioned a few pages over to start and refactor.6 is working perfectly, however I won't be able to actually use react-hot-loader/patch until I refactor my entire app :/.

[gadicc]

Great stuff, kinda. Thanks for all the detailed info. I started to look into this but ran out of time, but from looking at the meteorInstall bundle in app.js, I'm fairly confident I can get this working tomorrow (it's night time now, here). I'll report back when I have news. But don't let me stop you from refactoring your app :)

[clayne11]

Yeah, I'm sure the hot-reloading across Meteor packages can be fixed but using proper ES6 imports throughout my project is going to be much nicer in the long run since I will be less reliant on Meteor and more able to use off-the-shelf Npm packages like eslint-plugin-import which is an incredible debugging tool.

I'm also not sure if react-hot-loader will work properly at all with Meteor packages. I'm only guessing that's the issue, but I think it makes sense to start migrating either way.

[clayne11]

New bug - when a module with an export is modified that is not imported by anything the same error posted earlier is thrown (at exactly the same line).

[gadicc]

@clayne11 it just occured to me that your react-hot-loader/patch problem might be because you're using React in a package before your app loads. If you view-source your app, and look for the first local package in the list and try placing the code there, does it help?

Regarding imports from packages, see these:

• Proper import chain for Meteor packages meteor/meteor#6907
• Pattern for component updates outside the import chain gaearon/react-hot-loader#259

As for the new bug, can you be a bit clearer? If a module is not imported by anything that error is correct (and it should let Meteor's HCP come through). But how are you using a module without importing it? If you mean a package or an eagerly loaded file from outside of imports in your app, I think this is correct.

[clayne11]

For the react-hot-loader/patch I may not have been loading it in the right place. I'll try what you suggested. As it is, just having the code hit the client and re-render completely is still much better than waiting for a full page reload. A lot of my state is in the redux store anyways so I don't lose much if I lose my component state.

Looks like the Meteor package problem won't be fixed until a fix lands for that issue.

As for the bug I mentioned, it's very minor. It's happening while I'm developing a new component. Typically I will create a component, start implementing it, and then later on connect it up to the UI.

When the component exists but isn't being imported by anything (which for my workflow means I'm developing it), every time I save I'm getting the error that file is undefined, I think because the file has no parent (it isn't imported anywhere).

Thanks for all the work on this, it's really coming along.

[gadicc]

Yeah, I'm going to see if I can submit a PR for the Meteor issue, hopefully will have time to look into it before the weekend.

Ah ok, I got it! I'll look into that, tracking in #54.

Thanks! And also for the help recently. Yeah, I originally had much more modest intentions for this, but it's made such a big impact on my dev work that I'm motivated to keep improving it. It's exciting now to offer the full HMR API and support for other build plugins!

[gadicc]

@clayne11, see #57 re packages. PR submitted to Meteor and fixed the last few things on our side to work with this.

[gadicc]

Quick note that npm install --save-dev react-hot-loader@^3.0.0-beta.1 solves a few important issues, such as some HOCs (especially the mantra ones) not working correctly. It also moves from:

<AppContainer component={AppRoot} props={{prop1:val1}} />

to

<AppContainer>
  <AppRoot prop1={val1} />
</AppContainer>

[gadicc]

Thanks everyone for helping with the early work here. If any more issues arise with RHLv3, please open a new issue for it.

[gadicc]

react-hot-loader@3.0.0-beta.2 includes fixes for createFactory methods.