React-rails: Addons not being loaded to global state

[davidlormor]

This appears to be a similar issue to #315. Configuration and everything was set up correctly just like the previous issue, but when trying to use ReactCSSTransitionGroup in a component (defined in app/assets/javascripts/admin/components) I get a the following error in the browser console:

Uncaught ReferenceError: ReactCSSTransitionGroup is not defined

I can find the "development_with_addons" react file being loaded, but apparently the addon components being defined in this file are not being loaded to the global state for other components to use.

Adding var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; to application.js resolves the issue. Just wonder if there's a cleaner/more automated way to ensure that all components are being required on load?

[rmosolgo]

Yep, it's intentional that they're exposed on React.addons right now. That's the way the "official" react bundle does it (eg, https://fb.me/react-with-addons-0.14.6.min.js), and besides that, that's how it was when I started working on it, so I don't want to break it for people :P

I'd also love to see a more flexible & powerful way to load those things. You can see the existing build setup here: https://github.com/reactjs/react-rails/tree/master/react-builds. The addons object is created in addons-object, then tacked on to React.

I think it'd be nice to pick-and-choose your addons with //= require. Some people also requested making it more require-js friendly (although that doesn't apply to me personally).

[rmosolgo]

You can get them from React.addons either by adding addons = true in config, or requiring them one-at-a-time (see the bottom of https://github.com/reactjs/react-rails#reactjs-builds)

Hope that helps!

[quangv]

Thanks @davidlormor for the question and @rmosolgo for the clarification!

Just to be clear for anyone else running across this problem.

You'll need config.react.addons = true in application.rb and

`<React.addons.CSSTransitionGroup ... >
</React.addons.CSSTransitionGroup/>`

I couldn't get a-la-carte to work either. c18aa380