require('react') != require('react/addons')

[tkafka]

I am building frontend with browserify (+ reactify), and I found out, that when some of my components use var React = require('react'); and others use var React = require('react/addons'); then it seems like that each set of components has a different instance of React that don't talk to each other.

This means that if I instantiate my app with

var React = require('react'); // no addons
var App = require('./components/App.jsx');
React.render(<App />, document.body);

while my components use var React = require('react/addons'); // with addons, then it seems that any events fired by such components aren't handled (for example onClick={this.onClick} isn't called) - seemingly because their instance of React is different one than the instance that rendered the root.

When I replaced all require('react') calls in my app with require('./oneReact.js') where oneReact.js looks like this:

var React = require('react/addons');
module.exports = React;

all events started being handled again.

Is this behavior a bug or by design?

[sophiebits]

Definitely not by design. I can't think of why this would happen; it doesn't even sound like something we can control because the files should end up referencing the same module and browserify shouldn't run (or bundle) it twice.

[jquense]

I definitely had this happen with Webpack as well, extraordinarily confusing to debug.

[zpao]

I just created a simple example doing what @tkafka explained originally - https://github.com/zpao/react-bundling-example. I'm bundling with browserify & reactify (though the latter should have no effect on bundling). I looked through the generated bundle and there is only a single copy of React bundled.

I would love to see a case where this repros. My guess is typically that some other (third party perhaps) component is being required which also requires React. And it has a different version dependency. Or maybe its even the same but because of the way you ran npm install, there are dupes.

[tkafka]

@zpao Aha,you're right, that works: https://github.com/tkafka/react-bundling-example/tree/23b67dd7abaa60f432832efec06ff2c6448fe18f

But adding the same React == this.props.react code to my project results in false. So, it seem like the culprit is in my gulpfile, I'll investigate.

[tkafka]

More investigation, the culprit of my problem was that I am building app and vendor files separately, see https://github.com/tkafka/react-bundling-example/blob/master/gulpfile.js for simplified example.

There is vendor.js containing react, and app.js containing only app code and excluding the specified dependencies. What happened is that I had only react in dependencies array, and as browserify seems to compare 'react' and 'react/addons' textually, it packaged react to vendor.js while keeping react/addons in my app.js. And thus two instances.

[zpao]

Thanks for investigating! I don't think you're the first to do something like that (nor the last) so hopefully we'll be better able to diagnose this in the future. And then kill addons so it doesn't happen ever again.

[tkafka]

@zpao That would be awesome!
One way could be to check, if whenever user requires react/addons, then require('react') == require('react/addons') should hold (and shouldn't slow things down because when user requested addons, we can be sure we have non-addon react as well). And if not, then at least warn to console.

[pgollakota]

@tkafka Were you able to resolve the issue? I am trying to package my code into separate bundles - vendor and app. I am faced with the same issue. I tried various combinations of -r react -r react/addons, -r react/addons alone, {"aliasify": {"react": "react/addons", "react/addons": "react/addons"}}, etc. with no luck. Thanks!

[tkafka]

@pgollakota Yes, that's what worked for me, I can't verify that the syntax you use is ok (might it be the case that multiple arguments should look like -r aaa bbb ccc and if you call -r aaa -r bbb, you will get only the last one)?