Question: Enabling HRM Hot Module Replacement for React?

[edelgado]

Hi folks, the webpack-dev-server.md doc in this repo mentions that, in order to enable HMR for React we need add react-hot-loader as per these instructions.

Step one, enabling HMR was easy by adding the --hot option to the call for bin/webpack-dev-server in my Procfile. Additionally, I enabled the hmr setting in my webpacker.yml file.

Step 2 says to modify your root container to accept HMR:

 if (module.hot) {
   module.hot.accept('./containers/rootContainer.js', () => {
     const NextRootContainer = require('./containers/rootContainer.js').default;
     render(<NextRootContainer />, document.getElementById('react-root'));
   })
 }

Is that something that I need to handle outside of webpacker? I use react-rails and the react_component Rails view helper to integrate React components into Rails views.

I'm suspecting that HMR is not successful in my project because the React code is not setup to accept the hot modules. I get this every time:

Any help would be greatly appreciated!

[gauravtiwari]

@edelgado I guess because react-rails doesn't render at document.getElementById('react-root') DOM node? It produces some <div> tag and then mounts the component on it right?

[edelgado]

@gauravtiwari Yeah that's what I'm trying to find out. There doesn't seem to be a single main root DOM element where all react components are rendered into. react-rails kinda sprinkles React components here and there. So it may be more of a react-rails issue 🙁

As far as webpacker goes, does it seem to be setup correctly? Is that all I need to do on this side of things? Thanks!

[gauravtiwari]

@edelgado Yepp, that's all you need for webpacker side. Don't think you need to react-hot-loader, it now works without it but I guess it has better logging support.

For react-rails, since it uses some kinda of classname to render components in view. You could perhaps use that with document.querySelector and see if HMR works - the node should be same.

[edelgado]

Okie, not sure how to do that, but will look into it. Thanks @gauravtiwari for the tips. I'll close this issue as it doesn't seem to be something to do with webpacker.

[gauravtiwari]

I guess it's like this: https://github.com/reactjs/react-rails/blob/master/react_ujs/dist/react_ujs.js#L236

// Something like this - try to get a static class and see if it works
const node = document.querySelector('[data-react-class="SomeClass"]')
 if (module.hot) {
   module.hot.accept('./containers/rootContainer.js', () => {
     const NextRootContainer = require('./containers/rootContainer.js').default;
     render(<NextRootContainer />, node);
   })
 }
// Or to get all nodes
const nodes = document.querySelectorAll('[data-react-class="SomeClass"]')
nodes.forEach(node => console.log(node))

But I am not sure how that all works with webpacker: https://github.com/reactjs/react-rails#use-with-webpacker