We ended up giving up on react-select for the time being.

Just for an information, I receive this error when I add a new dependency to the project. If I delete node_modules and reinstall all the dependencies the error does not occur again.

We had this same issue but found a fix that has not been mentioned thus far. In our webpack setup we had a DLLs config with several entry points that was responsible for outputting 5-6 DLLs to be referenced in the main config. ‘react-select’ was in one and ‘react-modal’ was in another. Upon further inspection I realized that each of the DLL bundles was getting it’s own copy of react. The bug only surfaced when a react-select box was nested inside of a react modal, but both libraries worked independently.

Solution was to have a multi-layered dll build process where a dll bundle containing just react and friends is created first, then referenced by the “level 2” dll bundles that contain things like react-select, then all the resulting dll bundles are referenced by the main build file.

Use the webpack analyze tool to inspect the stats from your bundles, it should provide some insight into how and why webpack is inserting multiple bundles.

Another solution that has worked in the past for me with the ‘multiple copies of react’ issue is to use the resolve section of the webpack config to point to a particular single copy of react.

I am running into this issue too, using browserify-shim with the following external config:

module.exports = {
  "react": { exports: "global:React" },
  "react-dom": { exports: "global:ReactDOM" }
};

(As we had to load React on the page itself because other code on the page outside of the component I am trying to build relies on it). That was all working fine, until we did the following:

var React = require('react');
var Select = require('react-select');  // <--------- this ends up pulling in a second version of react rather than using the shim / global

module.exports = React.createClass({
  render: function() {
    var options = [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' }
    ];

    return(
      <Select options={options}></Select>
    );
  }
});

Has anyone resolved or worked around this issue while still using browserify-shim for React? It seems like browserify should be using the same configuration when resolving the requires down in a node_module package.

Should I give up???

I spent a couple of hours building this use case in isolation and after that, I decided the release a reusable component. However, after hours and hours and days trying to get this to work I’m finally in the step of making a decision…

I based my example on the sample from http://jedwatson.github.io/react-select/.

• QUESTION: How can I use this component, build a shared/isolated component, and still reuse it in my main application without this error?

Running in isolation: Works

Running as a Shared Component

The component above then was placed in an isolated NPM Module/component and published to our private NPM registry. Then, when trying to see the component, I get the following error…

Running as a Share Library: Arrows keys partially work…

As a consequence, the UI can’t render the properties right, but I can still use the up-down arrows to select my options, but without the nice UI experience…

Still work although it does not render properly…

Events don’t work anymore

No duplicate react Dependency

$ npm ls | grep react@
npm info it worked if it ends with ok
npm info using npm@4.2.0
npm info using node@v7.9.0
│ │ ├─┬ babel-preset-react@6.16.0
│ └─┬ redbox-react@1.3.6
├─┬ eslint-plugin-react@6.10.3
├─┬ react@15.4.2
npm info ok

same as cubbuk. I deleted node_modules and reinstalled all dependencies. The error went away

I tried with a simple component (cjsx syntax)

React = require('react')
Select = require('react-select')

@Test = React.createClass
  render: ->
    <div>
      <h1>Does it work?</h1>
      <Select />
    </div>

module.exports = @Test

But I still get the same error. I tried to remove all require('react') and require('react-dom') from react-select but error persists. I think it is related to the usage of refs in your code maybe? I tried both versions 0.9.1 and 1.0.0-beta9.

I will have to give up on react-select same as @mockdeep unless someone has some suggestions?

I encounter this problem few days ago with the same message as you got from the console…

The reason was React module was loaded twice. I had an html file that contains

<script type="text/javascript" src="<@spring.url "/react/react.min.js"/>"></script>
<script type="text/javascript" src="<@spring.url "/react/react-dom.min.js"/>"></script>
<script type="text/javascript" src="<@spring.url "/react/components/compiled/subcontract.js"/>"></script>

and subcontract.js is generated by webpack. The problem was one of the modules inside subcontract has a dependency to React module and webpack has also bundled that into the compiled subcontract.js. Therefore two React module was loaded in the page…