我如何在应用程序中对交换/附件进行“交换”反应？

Question

I want to use the Perf stuff. It seems that if I do:

var React = require('react/addons');

in my own modules then libraries (react-bootstrap, react-router etc.) end up using another copy of plain react and things break. I am using browserify.

Is there a fix or another way to do this?

Answer 1

Requiring react and react/addons will give you the same object. react/addons requires the same module that react does ( lib/React ), and react/addons even mutates that object so that anyone requiring react will get the addons as well.

If you end up with multiple versions of React in your bundle, it's because the libraries you use have react as a dependency instead of a peer dependency. You should use npm dedupe to avoid that. But react-router has react as a peer dependency, so react-router will get the same react module instance as your module (with the addons). Don't know about the other packages you use that depend on React though.

Answer 2

It turns out the problem was with my gulpfile. Tx for the comments about looking for a browserify shim that lead me to the solution:

My browserify task (from React JS workflow, part 2 ) builds separate vendors.js (libs) and main.js (my app) bundles during development using browserify.external(..) to exclude the libs from main.js. I just had to add "react/addons" as an external lib along with "react".

The issue is explained here:

https://github.com/substack/node-browserify/issues/1161