Rails 4 to 5 upgrade

[yhkang95]

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,

I was using react-rails fine with Rails 4, but it stopped working when I updated to Rails 5.

If I do <%= react_component('New') %>, I only get the below output and not the actual content.

<div data-react-class="New" data-react-props="{}"></div>

To figure out if it had any conflicts with other gems, I even created a new Rails 5 project. Still the same issue.

Below is the log I get in the console.

Uncaught TypeError: Cannot read property 'render' of undefined
    at Object.mountComponents (react_ujs.self-d595485….js?body=1:318)
    at HTMLDocument.ReactRailsUJS.handleMount (react_ujs.self-d595485….js?body=1:349)
    at HTMLDocument.dispatch (jquery.self-bd7ddd3….js?body=1:5227)
    at HTMLDocument.elemData.handle (jquery.self-bd7ddd3….js?body=1:4879)

Any help would be appreciated.

Thanks!

[rmosolgo]

It seems like React is undefined. How are you loading React?

[yhkang95]

I just ran rails g react:install.

//= require rails-ujs
//= require turbolinks
//= require jquery
//= require bootstrap-sprockets
//= require react
//= require react_ujs
//= require components
//= require_tree .

[rmosolgo]

Are there any other errors in the console? Is it possible that react.js didn't load successfully?

[yhkang95]

Hmm... I think I've got React v15.4.2 loaded alright, but it seems like ReactDOM is somehow not loaded.

I get there error here:

ReactDOM.render(React.createElement(constructor, props), node);

because ReactDOM is undefined.

[ikanade]

I am facing this same issue. Have you found any workaround?

[BookOfGreg]

@ikanade @yhkang95 can someone provide a way to reproduce the issue? Maybe a small example app to illustrate the problem for me?

[ch1ago]

@BookOfGreg can you tell us what the recommended versions of this gem are to the latest versions of Rails?

I'm facing the exact same on a Rails 4.2 app.

If this is in fact the problem. Could we add a small table on the readme page for version matching so people can look up? I'd be happy to help adding the PR, but I don't have the content.

[ch1ago]

It looks like it's not loading that variable in a specific context

I wish there was more I could do.

[BookOfGreg]

@thejamespinto I added a branch to the example app of Rails 4 + React-rails 2.4, installed as per the sprockets readme. example-Rails-4

It appears to work but this is only a simple example, is it possible to show a simple reproduction of the issue?

[ch1ago]

I wish :(
The solution I found was to use an older version of the gem.
gem 'react-rails', '1.4.2' works with gem 'rails', '4.2.7'
That's all I can safely guarantee.

Unfortunately, the application I am working with cannot be upgraded right now, and that's true for many rails apps out there.

@BookOfGreg I really think this is one of those projects that require a compatibility table for this exact reason. Thank you for maintaining it up-to-date. ❤️

[BookOfGreg]

@thejamespinto are you running mini_racer or therubyracer? We stopped supporting therubyracer a while back because it is utter rubbish at keeping up to date (running libv8 3 or something daft)

Trouble with this gem at the moment is we support many versions of "Options", you can't specify minimum versions of something that is optional.
rubygems/rubygems#1811

For example we support both Sprockets from V2 and Webpacker from V1.1, but I can't change the Gemspec to reject Sprockets 1 because that would stop you using webpacker, or force to install both.
You also can't really do rejecting other gems, for instance therubyracer does not support libv8 that's new enough, you simply must use mini_racer instead on linux. On windows it works with bare Execjs so I can't even lock the libv8 version.
This means the gem will 'resolve' in the bundle but will still not have it's deps met.

Any work I do to make a "golden" path (Webpacker > 2, Libv8 > 5, Rails > 4) risks cutting off huge chunks of users doing anything off the beaten path.

[ch1ago]

@BookOfGreg I'm part of a sad minority here because I'm using an old version of Rails and I want to add ReactJS to my project before upgrading Rails.

To be completely honest, I have already solved my compatibility issue by installing an older version and adding a future task for when upgrading Rails, and I could be out of this conversation already, but I know there are a lot of developers out there who would not take such precautions.

I think it is important to find a way to help them because that increases the adoption of ReactJS within the Rails community. So here's a suggestion:

How about not changing the gem specs, but instead running a short script when the gem is required/initialized that verifies inconsistencies and outputs suggestions?

I don't think anybody can write it spot-on the first time around, but that would help cater a self-fixing aspect feature from the community feedback.

I'd be happy to commit to patching this feature from three projects I have lined up to add ReactJS to.

Best, James.