browserify loading ReactJS twice with react-router

Question

I use browserify to bundle ReactJS and (among others) react-router. But when I look in the console, the message ...

Download the React DevTools for a better development experience: http://fb.me/react-devtools

... shows up twice (!) telling me that in fact two ReactJS instances are running.

If I look in my browserified JS I saw the ReactJS source only once.

How would I avoid this?

package.json:

"dependencies": {
    "LiveScript": "^1.3.0",
    "jquery": "*",
    "firebase": "*",
    "react": "0.11.2",
    "reactfire": "*",
    "react-router": "*",
    ...
}

When I run npm ls | grep -i react I get:

___ [email protected]
___ [email protected]
___ [email protected]
_ ___ [email protected]

Answer 1

Run npm dedupe. Most likely it's just two different patch versions of react.

You should never use wildcards for dependencies. For reactfire <0.1, and react-router ^0.9.

Answer 2

Check if you are importing react with a different name. for example

var React = require('react');

and

var React = require('React');

will cause react to be imported react twice.