Duplicate id for the same dependency

[tleunen]

I'm playing with Browserify and React today and in my bundle I'm noticing that React is loaded with 2 different dependency number. One is 158 and the other is 314.

In the bundle file, I can see this for 314

314:[function(require,module,exports){
arguments[4][158][0].apply(exports,arguments)
},{"./lib/React":187,"dup":158}]

158 is basically just a shortcut for module.exports = require('./lib/React'); which is 187.

My code is broken because of that, because it loads the dependency twice.

[tleunen]

I've created an example to illustrate the bug. You can find the code in this repo: https://github.com/tleunen/browserify-1181

In this file (app.min.js), you can find React twice with 2 separate ids (at the end of the file).

And the way I can reproduce it is by including a file from a top directory (like in this file).

[ghost]

This is deduping behavior caused by an upstream dependency requiring the same version of react. And my guess is that react is built around the assumption that it is the only instance in your app. If you npm dedupe or rm -rf node_modules; npm install it might fix this problem. You should also upgrade to a very recent version of npm since a lot of work has recently gone into fixing deduping.

[ericclemmons]

@substack You're correct. React borks like crazy if there are multiple versions trying to co-exist.

[leftmostcat]

I'm experiencing a similar issue with a module attempting to inject itself into jquery. Removing the duplicate jquery from the module's node_modules/ directory solved the problem. That said, it seems like browserify recognizes that the packages are duplicated. Why couldn't it (in the above instance) simply give 158 to the second package require()ing React instead of creating 314 to de-duplicate it?

[pgoldrbx]

@ericclemmons @substack — along the same lines, using React, I have two libraries that i'm working on locally and using npm link to require one from the other, and I'm linking React in each project to a global install. When the browserify bundle gets created, React is added twice since the path to node_modules is different.

npm install -g react

cd ~/project_a
npm link react
npm link

cd ~/project_b
npm link react
npm link project_a

On the server-side, everything is fine since there's only one instance of React on the process. But I haven't figured out how to work it out in the bundle yet.

I would be grateful for any ideas or suggestions.

[ericclemmons]

@pgoldrbx Similar issue for me. To be honest, I couldn't find a fix, and ultimately started pruning all node_modules/react except for the parent-most one.

As best I can assume, the same package.json.version doesn't come account for de-duping, only the location?

[pgoldrbx]

I think our issue is actually described here already:
#1063

[giggio]

I have found that browserify-resolutions solves the problem. I had the same problem with jquery plugins, I had one instance for each jquery called by each plugin. browserify-resolutions fixed it.

[chrisirhc]

I think this is now fixed since #1063 is now closed (changes have been merged)

[giggio]

@chrisirhc Not really. If the dependency is depended upon twice, it will have 2 ids.

If A depends on D and B also depends on D, D will have 2 different ids. browserify-resolutions makes sure they don't.
#1063 is related to symlinks, it does not look like the same thing.

[chrisirhc]

You can resolve this by linking D of B into A so both A and B depend on the same D.

For example, I assuming a and b both depend on d and they're in the same directory:

cd a/
npm link ../b/node_modules/d

This tells browserify (and node) that you want the exact same d module.

[giggio]

@chrisirhc It makes no sense that I should have to manually enter the node_modules directory to symlink directories. When you npm install npm resolves the dependencies itself, I should not have to go and manually change things.
An example are the jquery plugins. Imagine you install 2 different jquery plugins, each jquery plugin might attach itself to a different jquery instance. This is exactly what you do not expect. This gets even worse as npm and jquery are saying that browserify is the way to go for these plugins, but this setup will simply not work if you use more than one plugin.
Until I found browserify-resolutions browserify made itself unusable. This is critical and I am appalled that this issue was closed and letting this go on like that.