React component doesn't work with `jquery3`

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

---

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!

[BookOfGreg]

Thanks all for the help with this one 👍