(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.
• 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.

[Ledespana]

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

[Ledespana]

@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>

[Ledespana]

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 method javascript_pack_tag' for #<#Class:0x007ffff6e679b0: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.