Is there a way to avoid duplicate packages

[aksarben09]

I am using cosmos:browserify with React-Bootstrap. However, React-Bootstrap seems to bring in another copy of react causing Invariant Violation:

addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded

Issue #1402 indicates that using browserify-resolutions resolves the problem.

Is there a way to avoid duplicate packages with cosmos:browserify? How can I call browserify-resolutions from cosmos:browserify?

[elidoran]

You could try specifying it in the options file as a plugin.

plugins can be provided by putting them in the options passed to Browserify (see here). cosmos:browserify accepts options in the *.browserify.options.json file and passes them on to Browserify.

So, make an options file with a plugin key and an array value containing the name browserify-resolutions.

[aksarben09]

Thanks a lot for the suggestion!

It looks like browserify-resolutions needs to pass an option to plugin function (see here). But Browserify doesn't seem to pass additional options to plugin function through the opt param.

I think this is more like a Browserify problem than cosmos-browserify. I am closing this issue. Still, thank you a lot!

[elidoran]

You're right, it needs to pass an option for the option, I missed that.

I can fix that in cosmos:browserify. I've had a patch sitting around for a while now which converts more options stuff into direct calls on the Browserify object.

I added plugin to it and published it as 0.10.0.

So, do this in your options file:

{
  "plugin" : [
    { "browserify-resolutions" : "*" }
  ]
}

Or, you can use an array as the value after "browserify-resolutions".

Please let me know if this works for you.

[aksarben09]

@elidoran Thanks a lot for the fix! It seems to be working!