views of .js.es6.jsx not hot-reloading

[travisdmathis]

added an initializer and added file type to react_rails_hot_loader.rb but no joy :(

Any ideas?

[HotLoader] updating: intern_badges.js.es6.jsx [HotLoader] update finished

but the content doesn't reload.. i have to manually refresh.

[rmosolgo]

Loading consists of:

• Executing the JavaScript in the updated file
• Calling ReactRailsUJS.mountComponents() to re-mount components in views.

This only works if the global reference to the component (eg MyApp.MyComponent) was updated by executing the JS in that file.

Is that true in this case, does intern_batches.js update the global reference to the component? If you're not sure, feel free to share the contents of the file.

[kevgathuku]

Sadly, I'm experiencing the same with a .js.jsx file with only one component. The [HotLoader] logs are shown on the console but I have to manually refresh to see the updated content. Where can I find the intern_batches.js file to see what's going on? Thanks in advance.

[rmosolgo]

intern_badges.js.es6.jsx is a file in travisdmathis's app. It's the component that isn't reloading properly.

@kevgathuku, if you'd like to share some details, I'd be happy to debug with you. Here is some useful info you could share:

• The call to react_component(...) in your Rails view, showing the component name and props
• The source code of the component which doesn't update
• The log messages from [HotLoader]

[kevgathuku]

Thanks for clarifying @rmosolgo The log messages are shown below:

Here's a repo with the project in question: https://github.com/kevgathuku/rails-react-demo

The call to react_component is in https://github.com/kevgathuku/rails-react-demo/blob/master/app/views/site/index.html.erb The component itself is: https://github.com/kevgathuku/rails-react-demo/blob/master/app/assets/javascripts/components/main.js.jsx

[rmosolgo]

Thanks for the details!

I think that the HotLoader just flat-out doesn't work with require.

It works by reloading the jsx file (in this case, main.js.jsx), which reloads the module in isolation, but doesn't require it again. So the new definition of Main is never re-attached to window, and react_component("Main") doesn't have access to it.

I wonder how this could be addressed. Somehow, we have to reload the "manifest", too (components.js), since that's where the components are actually attached to window :thinking:

[kevgathuku]

Hmm..that seems interesting. I currently don't have any idea how to approach such a problem given I am new to the Ruby and Rails ecosystem, but I am familiar with JavaScript. Any idea how I could help?

[travisdmathis]

i apologize, i missed this update, and I'm no longer working on this project, it has since been completed so don't have any access to work w/ this any further.. I'm also not using react-rails anymore so..

[xifengzhu]

I also encountered the same problem. Anyone known how to fix it?