Hot Module Reloading

[justin808]

HMR is in a lot of flux.

Hot Reloading in React
or, an Ode to Accidental Complexity: Article by Dan Abramov that sums up the issues.

@jbhatab We should definitely remove any HMR from the generators and refer to doc pages.

@alexfedoseev Any suggestions?

[robwise]

@justin808 you're confusing HMR and React Transform, there's nothing wrong with HMR

[esauter5]

I read the article the other day and what I got from it is that React Transform works, but is not the ideal solution. Seems like it should stick around until there is a better solution, no?

[thewoolleyman]

So, does the current version of react_on_rails use "Vanilla HMR" as described in the article, or something else?

[justin808]

We're using: https://github.com/gaearon/react-transform-hmr

See:

• https://github.com/shakacode/react_on_rails/blob/master/spec%2Fdummy%2Fclient%2Fwebpack.client.rails.hot.config.js#L36
• https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/client%2Fwebpack.client.rails.hot.config.js#L42

[seoyoochan]

Hot reloading works, but whenever I click on an anchor tag to navigate other pages. I get collision issues about React or babel-polyfil (issue here)

[justin808]

@alexfedoseev @robwise Any chance you can jot down the notes we've been having internally in this file: https://github.com/shakacode/react_on_rails/blob/master/docs%2Fadditional-reading%2Fhot-reloading-rails-development.md

If all there, let me know and I'll close this issue.

[alex35mil]

@justin808 There is nothing to add about non-rails related things yet. Next way of doing hot reloading in react apps w/ mixed stateless & stateful components — react-hot-loader — is in beta and we need to add one more method to ReactOnRails api to make them compatible.

[justin808]

@alexfedoseev What's the method to add to React OnRails. Should this go into v6? I can wait for this if it's something simple.

[robwise]

@justin808 I wouldn't delay v6 as react-hot-reloader is still somewhat in flux, although it wouldn't hurt to start working on this.

[alex35mil]

👍

We need method, which will allow to (re)call ReactDOM.render for component.

[justin808]

@alexfedoseev can you show me what's needed and I'll make a PR or if more efficient, you can start the PR and I'll finish it. Don't spend more than a few min on this! (too much other more important things!)

[justin808]

@alexfedoseev Can you confirm this is just a doc issue?

[robwise]

@alexfedoseev we should hack on this together at some point. Justin I don't think this is a docs issue, we need to change the code to expose a hook we can use for the new react hot reloader

[alex35mil]

@robwise Yeah, on hold until this will be released (https://github.com/gaearon/react-hot-loader).

[archonic]

Just wanted to confirm that I've got as far as I can with hot reloading. I've been trying to get it working in a hello world app. There's no more npm or webpack complaints and in the console I'm getting [WDS] App updated. Recompiling... [WDS] App hot update....

Is it just triggering ReactDOM.render that's the missing link?

[robwise]

@archonic Basically yes, since we use ReactOnRails to do the rendering, that won't work for us

[aCandidMind]

I got it working without any additional API from react_on_rails by this import import { render } from 'react-dom'; and this render call render(reloadedApp, container.lastElementChild); with the new https://github.com/gaearon/react-hot-loader 3.0.0-beta.6. container being the DOM element that wraps the Rails view helper react_component. It might be a little brittle regarding changes in the way react_on_rails does its rendering. But it at least covers the transition period.

[robwise]

@aCandidMind Are you also feeding the Rails props in there when you re-render or how does that work?

[archonic]

As a side note, I'm totally lost as to how I'm supposed to rerender components. The whole point of implementing React is to have a way to manage changing data, but it seems that concern is undocumented. The React object seems to be unexposed in the console.

[robwise]

@archonic I'm not sure I totally understand your question here.

Normal React:

const mountNode = document.getElementById('#mount-point'); // mount-point is the id of some div
ReactDom.render(MyComponent, mountNode);

ReactOnRails:

ReactOnRails.register({ MyComponent: MyComponent });

Then in your Rails view, you do

react_component("MyComponent")

Then ReactOnRails handles the rendering when the page loads. If you want to dismount the entire React component from the page at some point, you would do that the same way you would do it with React, but that's not a typical use case. The react hot loader use case is sort of unusual in this way and is why we're having trouble with it.

When it comes to mounting and unmounting components in response to changing data, that usually happens with the children, not the parent-most component itself. Here MyComponent is the parent-most component. It may have many children, which may be being rendered or removed according to the logic you wrote in your React code.

[archonic]

I have a component which should update after a successful ajax call, but I'm not sure how to wrap the response to re-render the component. I'll have a code example available soon and I'll open an issue if I still have one - don't want to thread jack this issue.

[ezmiller]

Just curious, what's the status on this update? Is the decision to add support for react-hot-loader v3 at some point in the near future? I tried implementing it and ended up getting the "the following modules couldn't be hot updated" error. I fell back to react-transform-hmr and things are working. But it would be nice to have a roadmap here so as to know what to expect...

[justin808]

@ezmiller It would be great if you can hack on this and maybe create a doc or code PR.

I recommend you try this out at https://github.com/shakacode/react-webpack-rails-tutorial/.

[ezmiller]

@justin808 It's possible I can find some time for that. Above some people were reflecting on the need to modify the ReactOnRails API, adding a function. Can anyone explain why? I'm not familiar with the details of the mechanisms.

[justin808]

@ezmiller I'm not sure on why the API change is needed.

[alex35mil]

I haven't read entire thread since my last comment, but this should solve the issue: #581

NB!: This change will allow to use react-hot-loader@3, but it's in the beta state right now and whole project is on hold, so things are not going to change in the near future.

[ezmiller]

Why is react-hot-loader on hold?

[alex35mil]

https://twitter.com/dan_abramov/status/780759519441850368?lang=en
https://github.com/gaearon/react-hot-loader/commits/next

[justin808]

FWIW, hot module reloading is still problematic. We're considering using the https://robertknight.github.io/posts/webpack-dll-plugins/ to optimize build times and just manually refreshing.

[alex35mil]

Also FWIW, as it turned out issue w/ shared store wasn't caused by DLL + WDS conflicts, but DLL only and it wasn't solved yet. So theoretically DLL + WDS can live together, but still, WDS is pretty useless in combination w/ CSS modules + (not working properly) React components hot reloading. So until it's fixed somehow, it's worth to get rid of complex WDS setup in favor of static dev build w/ DLL, which is fast & close to the production one.

[rupurt]

@justin808 what problems are you running into? I've got HMR working when I manually handle the render via ReactDOM.render. As a few other people have mentioned it would be nice to get this supported for the ReactOnRails.register({ MyComponent: MyComponent }); use case.

[justin808]

@rupurt We use ReactDOM.render in our helper functions.

https://github.com/shakacode/react_on_rails/blob/master/node_package/src/clientStartup.js#L120

      ReactDOM.render(reactElementOrRouterResult, domNode);

[mongjong59]

React Hot Loader works perfect for me. I just created a minimal demo here.

[justin808]

Opening a new ticket to integrate this into React on Rails.

[ezmiller]

@justin808: so does react on rails now support React Hot Loader? I have been looking through the threads but can seem to locate a PR that added support...

[justin808]

Hi @ezmiller,

We certainly support it, but you'll have to configure it yourself. @Judahmeek got it working on https://github.com/shakacode/react-webpack-rails-tutorial.

Is there any chance of you giving me a hand with the PRs that put React on Rails on top of Webpacker:

• Support React on Rails by merging Webpacker Lite rails/webpacker#601
• VERSION 9.0: Update to Webpacker from Webpacker Lite #908

Other links:

• 9.0.0.beta.1 Gem
• Video of GORUCO 2017 talk

CC: @Judahmeek

[ezmiller]

@justin808: I'd like to help, but time is limited. What exactly do you need help with? You are trying to get react on rails to work through webpacker? I've not used webpacker so am unfamiliar, but it looks like it delivers webpack assets more seamlessly in rails?

[justin808]

@ezmiller Can you try to make hot reloading work with the beta version of the gem? https://rubygems.org/gems/react_on_rails/versions/9.0.0.beta.1

Maybe take some notes and let me know where you get stuck and I'll help you out.

[ezmiller]

@justin808 hmm still using an older version, so will need to manage the upgrade first. I will try to circle back to this. Have another issue I have to deal with first. I would like to help.

[ezmiller]

@justin808: I finally have a chance to turn to this issue, so I'm going to to try to upgrade to the beta version. Anything changed since we discussed this back in early August?

[justin808]

@ezmiller Please try out beta.12.

Please see https://github.com/shakacode/react_on_rails/blob/rails-webpacker/docs/tutorial.md for the very simple steps to create a new app using the beta. You will need to ensure that you put in the beta versions.

• https://www.npmjs.com/package/react-on-rails
• https://rubygems.org/gems/react_on_rails/versions/9.0.0.beta.12