React-rails: React.addons undefined

[gauravtiwari]

Hey @rmosolgo

Just upgraded and getting undefined error for React.addons, seems like the application config is not loading react with addons version. I do have have config defined in application.rb

Thank you,
G

[rmosolgo]

ruh roh, did you also the development server?

[gauravtiwari]

Yes, on development server. Putting a copy of react from react-source into /vendor/assets seems to resolve the issue. Seems like the gem is not picking up the right version from react-source?

[rmosolgo]

I'm sorry, I missed a word!

I meant "Did you also restart your development sever?", eg cmd-c -> rails s or powder restart

The gem _should_ add this folder to the asset pipeline: https://github.com/reactjs/react-rails/tree/master/lib/assets/react-source/development-with-addons

Can you open a rails console and share the result of puts Rails.application.assets.paths ?

[gauravtiwari]

Yes I did, cleared rake tmp:clear also, just in case.

Seems like it's there /gems/react-rails-1.1.0/lib/assets/react-source/development-with-addons

I am getting this output for react source in console.

[rmosolgo]

I'm trying locally with the newest version:

~/projects/magic_browser $ bundle show react-rails
/Users/rmosolgo/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/react-rails-1.1.0

and in application.rb:

    config.react.addons = true

And it's defined in the browser:

For more debugging, could you share:

• application.rb & development.rb (wherever config.react is used)
• application.js (or wherever you //= require react)
• the JS where React.addons is undefined
• The output of React.application.assets.paths in a console

thanks

[gauravtiwari]

Yes I see, looks like its working in yours. In mine, I have the exact same setup in my environments/* and application.rb but it doesn't seem to load the with-addons version.

  # application.rb
  config.react.addons = true
  config.react.server_renderer_pool_size  ||= 5
  config.react.server_renderer_timeout    ||= 20
  config.react.server_renderer = React::ServerRendering::SprocketsRenderer
  config.react.server_renderer_options = {
      files: ["react.js", "components.js", "underscore.js", "jquery.js", "bootstrap-tagsinput.js", "js-routes.js", "showdown.js"],
      replay_console: true,
    }

The error I am getting is for var PureRenderMixin = React.addons.PureRenderMixin;

I have just defined config.react.variant = :development in development.rb. Everything looks fine in the application.js. In fact, if I put react.js into /vendor/assets it loads just fine.

The assets path is loaded in the app: /gems/react-rails-1.1.0/lib/assets/react-source/development-with-addons

I am investigating...

Thank you for working with me to figure this out :)

[rmosolgo]

could you please share:

• application.js (or wherever you //= require react)
• the JS where React.addons is undefined (with file for context, if possible)

[gauravtiwari]

@rmosolgo I actually removed everything from application.js and just used React and $ and still getting the same error.

//= require jquery
//= require react
//= require react-infinite
//= require react_ujs

[rmosolgo]

Any chance it's caused by react-infinite? If you remove //= require react-infinite, is it any different?

[gauravtiwari]

Nope, that doesn't solve the issue :( Investigating...

[rmosolgo]

You could also double-check that there's not another copy of React.js in the asset pipeline:

Rails.application.assets['react'].filename
# => "{path-to}/gems/2.2.0/gems/react-rails-1.1.0/lib/assets/react-source/development-with-addons/react.js"

[gauravtiwari]

thanks @rmosolgo :) One of the external dependencies was causing this. Really appreciate your help!

[rmosolgo]

Cool, glad you tracked it down!

[dv]

Which dependency gauravtiwari?

I am reminded of this comic - https://xkcd.com/979/

[postbud]

Deploy project on server. Start Rails in production mode.
Error in js console:
Uncaught TypeError: Cannot read property 'CSSTransitionGroup' of undefined

Resolve:

1. Add line to application.rb:
   config.react.addons = true
2. Copy to _/vendor/assets/javascripts_ files:
   react.js
   react-server.js
   from _/react-source/production-with-addons_
3. Assets precompile: RAILS_ENV=production bin/rake assets:precompile
   (if needed)

it works