ShakaCode | ShakaCode Blog | Rails On Maui Blog | Rails | ReactJs | JavaScript | Webpack | Productivity |

Integrating react_on_rails section into an existing Rails 4.2 app javascript trouble


#1

Hi, all. I have build a working part of a bigger application using react_on_rails gem, basing my work and configurations on the awesome react-webpack-rails-tutorial.

To keep things quarantined, my choice was to have separate application layout files for both parts, the original Rails piece not including the generated webpack files.

When I follow the React application routes, however, I noticed an error in the browser console implying that my OLDER javascript libraries were not properly loaded AND my drop-down menu (using Bootstrap) is no longer working.

I figured it had something to do with ordering of the script files, so I methodically relocated the webpack bundle files from TOP of the layout to BOTTOM, still having issues.

Has anyone encountered this issue before? If so, what is the recommended approach to fixing it without re-writing the entire Menu+Layout using React? I’m a bit new to ReactJS and webpack.


#2

OK, after spending some time to try and figure this out, I think the issue is ReactJS is interfering with ‘document.load’ hooks somehow. If anyone has more insight on this, would be great.


#3

Figured out the problem. It appears that Bootstrap.js file was referenced in 2 places (in rails application.js file and, what eluded me at the time, in webpack configuration file as dependency that was compiled.)

Additionally, the jQuery events seem to have been broken due to Turbolinks caching (that I did not realize were enabled.)

Such a combination appears to cause silent issues.

I am posting this in case anyone else runs across similar scenario.


#4

I am currently experiencing something similar to this (I believe) where the order of webpack determines what breaks. Either cucumber tests break (when webpack is at the top of applications.js //= require web… or the page silently fails when placed anywhere other than the top). We are also using prototoype so I am not sure if that is also contributing to the issue, but this post, does help. Thanks for your post.

UPDATE: mine is only vaguely similar and still related to location of webpack. It seems prototype and jquery and react do not play well together, yet.