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

[kristophM]

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.
• [x] 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:

after:

[swrobel]

I'm having the same issue - components don't mount until I manually run ReactRailsUJS.mountComponents()

[arkes]

I'm having the same issue too.

[ledes]

Same here. Why is this happening? Is there a quick fix?

[ledes]

@swrobel How do you call ReactRailsUJS.mountComponents() manually.
When I added to my index.html.erb like this, I got ReactRailsUJS is not defined

<script>
  ReactRailsUJS.mountComponents()
</script>

[ledes]

I think I fixed my issue.
In my case my controller was

class StatisticsController < ActionController::Base

instead of

class StatisticsController < ApplicationController

[cmavromoustakos]

I have been seeing the same behavior using

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

[xdavipereira]

I'm also having the same behavior, using this same version

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

[rmosolgo]

Is there any error in your javascript console?

Are you using any of:

• Pjax
• Turbolinks
• Jquery

?

[swrobel]

I am using Jquery only and don't have any console errors

[xdavipereira]

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 =)

[sidot3291]

I'm having trouble with this as well. Putting a javascript_pack_tag in the layout works, but it's not ideal if you simply want to render a react component inline on a page.

For now, I've defined a separate layout with the pack tag for the pages of my app that use a React component, but I would prefer to get the react_component helper working.

[AshrafLobo]

I have the same problem but the javascript_pack_tag fix doesn't work for me. I get this error
undefined methodjavascript_pack_tag' for #<#:0x007fecce4be868>
Did you mean? javascript_path
javascript_tag`

[randyv12]

@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

[Deekor]

I've noticed this is a problem only when I have any version of jQuery required in my application.js

Edit: Looks like if I move the jQuery require below //= require components it works.

[xorsnn]

Placing <% = javascript_pack_tag 'application'%> at the end of the "body" block worked for me.

[BookOfGreg]

Hi all,
Quite a few of you in this thread!
Has anyone been able to replicate this in versions 2.3 or 2.4 of react-rails?
We did a bugfix to how event detection happened (Turbolinks was undefined causing execution to stop) which was causing similar issues to this for other folk.

[hansololai]

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.

[BookOfGreg]

Hmm it's a tough one, if jQuery isn't firing it's ready event due to some other application bug then there's likely nothing we can do to detect it, and we don't want to intentionally use DOMContentLoaded if jQuery is present.

Seems like this thread seems to be gathering diverse comments that have a variety of causes, some not loading JS in right place, or right order or missing pack tags, enough to be worthy of documenting.

Will reopen if there is any good solution to this, otherwise will likely add a mention to any future troubleshoot section.
Edit: First version of Troubleshooting doc: https://github.com/reactjs/react-rails/wiki/Troubleshooting

[duckworth]

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

[BookOfGreg]

Thanks @duckworth !
That is on the plan to correct though I'm a little strapped for time at the moment.

The problem is likely to be with this:
https://github.com/reactjs/react-rails/blob/master/react_ujs/src/events/detect.js#L22
I'll copy this message to the other issue.

[xiobot]

Hey, I had this issue and I can confirm removing JQUERY fixed the problem.

For reference I was using JQUERY version 3.2.1 via a script in application.html.erb

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Using this version of JQUERY causes my react render methods to fail.

For anyone looking for a solution, you can use version 2.2.4 instead

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>