react-rails: (JQuery 3 is incompatible) Helper method react_component not working unless I manually mount component

Help us help you! Please choose one:

  • My app crashes with react-rails, so I’ve included the stack trace and the exact steps which make it crash.
  • My app doesn’t crash, but I’m getting unexpected behavior. So, I’ve described the unexpected behavior and suggested a new behavior.
  • I’m trying to use react-rails with another library, but I’m having trouble. I’ve described my JavaScript management setup (eg, Sprockets, Webpack…), how I’m trying to use this other library, and why it’s not working.
  • I have another issue to discuss.

Hi guys,

Great gem! I am facing an issue in which my <%= react_component %> helper is not displaying right away. If you notice in the screenshot “before.png”, The inspector definitely shows this helper getting translated into the data-react-class html object. However, there is no HTML being rendered inside of it. THEN, I manually run ReactRailsUJS.mountComponents() after the page loads and as you can see in “after.png”, it loads everything successfully!

I’ve followed the instructions in the README as well as other tutorials, yet the helper is not working automatically. Please let me know if I can provide any additional information to debug this. Thank you!

Kristoph

before: before after: after

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 7
  • Comments: 21 (4 by maintainers)

Most upvoted comments

In the app/javascript/packs/application.js file there is comment about adding to the application layout file like app/views/layouts/application.html.erb

the following code: <%= javascript_pack_tag 'application' %>

i added to my layout file and my component worked well

Was my lack of attention, but I think a mention in the installation guides about adding <% = javascript_pack_tag 'application'%> to the layout file of the application would be interesting, even though it is obvious something =)

Ran into this as well and it was due to jquery3 removing .on("ready", fn) that react_ujs is binding to. https://jquery.com/upgrade-guide/3.0/#breaking-change-on-quot-ready-quot-fn-removed There is an open issue for jQuery 3 here: https://github.com/reactjs/react-rails/issues/762

I dig through the code a little and found out react-ujs assigned the function handleMount with the jQuery ready event if query exist. But the ready event was not fired for some reason. So just like @Deekor did, move the require for jQuery below, then the ujs will not use the jQuery ready event, but use the DOMContentLoaded event.

@AshrafLobo , javascript_pack_tag is a helper function from the Webpacker gem https://github.com/rails/webpacker/blob/master/lib/webpacker/helper.rb#L27

you can just use the javascript tag I’m not sure if it is recommended to wait for DOMContentLoaded before mounting react components or just placing the mount at the bottom of the page works.

But from my experience, yes we still need to react ujs mount components

I have been seeing the same behavior using

gem 'react-rails', '~> 2.2', '>= 2.2.1'