React-rails: React component doesn't work with `jquery3`

[ghost]

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

---

When I replace jquery (which makes everything work fine) with jquery3 (https://github.com/rails/jquery-rails#installation), my React component is included in the final HTML, however, I can't see it in the browser itself. Also, no errors are displayed in the JS console.

application.js.coffee:

#= require jquery3
#= require jquery_ujs
#= require react
#= require react_ujs
#= require_tree ./components

➙ Screencast showing the issue

[rmosolgo]

Hi! thanks for sharing that screencast. Looking at the jQuery 3 upgrade guide, it looks like there were several changes to event handlers.

I guess we should

• Add jquery3 to react-rails test suite to demonstrate the failure
• Audit jquery usage in react_ujs:
  
  
  
  • https://github.com/reactjs/react-rails/blob/master/react_ujs/src/events/native.js#L5-L8
  
  
  • https://github.com/reactjs/react-rails/blob/master/react_ujs/src/events/detect.js#L21-L27
  
  

Maybe our usage there needs to be updated!

[Deekor]

My react component won't render if I have any version of jQuery required in my applications.js

I tried

• //= require jquery
• //= require jquery2
• //= require jquery3

My component would only show if I didnt have a require for jQuery. I am seeing no errors in my console.

[Deekor]

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

[BookOfGreg]

@Deekor I have just documented that observation in https://github.com/reactjs/react-rails/wiki/Troubleshooting , thanks!
May do some work to check how the detector is working with the variety of jQuery versions.

[BookOfGreg]

From @duckworth at https://github.com/reactjs/react-rails/issues/742#issuecomment-346156982

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

The problem is likely to be with this:
https://github.com/reactjs/react-rails/blob/master/react_ujs/src/events/detect.js#L22

[BookOfGreg]

Could someone confirm it's fixed in the pre-release of the gem?
https://rubygems.org/gems/react-rails/versions/2.4.4.pre
Also there's a npm tag of "pre" for the UJS too for those using webpack.

[duckworth]

I just tested with 2.4.4 and can confirm that I no longer need to manually call ReactRailsUJS.mountComponents()

Thanks!

[BookOfGreg]

Thanks all for the help with this one :+1: