React-select: Uncaught Error: Cannot find module 'create-react-class'

Created on 17 May 2017 · 18Comments · Source: JedWatson/react-select

Uncaught Error: Cannot find module 'create-react-class'
    at s (react-select.js:1)
    at react-select.js:1
    at Object.<anonymous> (react-select.js:823)
    at Object.5../Async (react-select.js:2038)
    at s (react-select.js:1)
    at e (react-select.js:1)
    at react-select.js:1
    at react-select.js:1
    at react-select.js:1

issubug-unconfirmed

Source

sonhgc00016

👍11 👎1

Most helpful comment

Same issue as @aluskin and @azotova. Also found that reverting to [email protected] and [email protected] with [email protected] solves the issue.

willyts on 31 May 2017

👍2

All 18 comments

This sounds like you have some dependency issues. Can you let me know what steps you have taken after you saw this issue? Can you give me a reproducible build?

agirton on 17 May 2017

@agirton Thanks for looking into this!
I use the builds from CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script>
<script src="https://npmcdn.com/react-input-autosize/dist/react-input-autosize.js"></script>
<script src="https://npmcdn.com/react-select/dist/react-select.js"></script>

I get two error messages:
1) Uncaught Error: Cannot find module 'react' (this comes from react-input-autosize, I described the issue with react in a comment here: JedWatson/react-input-autosize#84 )
2) Uncaught Error: Cannot find module 'create-react-class' from react-select.

My temporary fix is to use the previous versions of react-select and react-input-autosize (in this way I get react warnings but at least everything works):

script(src="https://npmcdn.com/[email protected]/dist/react-input-autosize.js")
script(src="https://npmcdn.com/[email protected]/dist/react-select.js")

azotova on 17 May 2017

👍2

Thanks, I will need to update the README, but you will need to include create-react-class and prop-types from the CDN if you don't use a module bundler.

agirton on 17 May 2017

😕1

Thanks! I think that this will fix the issue with react-select but not with react-input-autosize. In case of react-input-autosize, the create-react-class module is part of the build as a dependency, but, if I understand this correctly, it requires react and react is undefined.

azotova on 17 May 2017

The UMD build of create-react-class should cover both packages since it attaches it to the global scope.

agirton on 17 May 2017

I included <script src="https://unpkg.com/create-react-class/create-react-class.js"></script> (after react-dom, before react-input-autosize) and still get the same two error messages.
I might be reading it wrong, but I guess that in line 2038 here https://npmcdn.com/[email protected]/dist/react-select.js create-react-class is given the value of undefined in the current scope. The same is happening with react in react-input-autosize.

azotova on 17 May 2017

A very simple way to reproduce the issue:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-with-addons.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.js"></script>
    <script src="https://unpkg.com/create-react-class/create-react-class.js"></script>
    <script src="https://unpkg.com/classnames/index.js"></script>
    <script src="https://unpkg.com/react-input-autosize/dist/react-input-autosize.js"></script>
    <script src="https://unpkg.com/react-select/dist/react-select.js"></script>
  </head>
  <body>
    Hello, world!
  </body>
</html>

Just opening a file with this code in the browser triggers error messages.

azotova on 18 May 2017

Hi, same issue as azotova, I'm blocked, I manage to build the project with npm start and run the demo, but no way I can find a working set of script includes to code my own selects.
the fix has not been merged yet.
reverting to rc3 doesn't work either (can't select any value in the dropdown)
including create-react-class and prop-types does not work here.

vlaquest on 31 May 2017

Same issue here. We have the same two console errors as azotova. Reverted to 1.0.0-rc.3 and autosize 1.1.0 as a work-around.

aluskin on 31 May 2017

Same issue as @aluskin and @azotova. Also found that reverting to [email protected] and [email protected] with [email protected] solves the issue.

willyts on 31 May 2017

👍2

Hi guys, the workaround does not work for me. There is no js error and the select control appears, but no click would work, don't get why. Here's my code:

<!DOCTYPE html>
<html>
<head>
    <title>Select tests</title>
    <meta charset="utf-8" />
</head>
<body>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/react-select.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script>
    <script src="https://unpkg.com/classnames/index.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/react-input-autosize.js"></script>
    <script src="https://npmcdn.com/[email protected]/dist/react-select.js"></script>

    <form name="react-form">
        <div id="select">
        </div>
    </form>

    <script src="React/Select.jsx"></script>

</body>
</html>

With the following jsx:

var envOptions = [
  { value: 'a', label: 'A' },
  { value: 'b', label: 'B' },
  { value: 'c', label: 'C' }
];

const MySelect = React.createClass({
    render() {
        return (
            <Select name="form-field-name"
                value="a,b"
                multi={true}
                options={envOptions}
            />
        );
    }
});

ReactDOM.render(<MySelect />, document.getElementById('select'));

vlaquest on 2 Jun 2017

@vincentlabatut It looks like your issue is not related to react-select versions.

I might be wrong but I would guess the click doesn't work because you haven't specified the onChange handler.

azotova on 2 Jun 2017

@azotova Got it ! thanks ! I thought naively I could reuse pieces of code from the github home readme, but they're not real examples, they don't really "work". I could see the real examples in the sources. Thanks a lot.

That doesn't solve the create-react-class problem, that is blocking.

vlaquest on 2 Jun 2017

Until standalone versions are available again on github you can use these links:

Symbols are exported as reactSelect and reactInputAutosize on the window.

pateketrueke on 20 Aug 2017

@pateketrueke Thank you for the links, but these builds throw errors for me:

Error: 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 (details: https://fb.me/react-refs-must-have-owner).  0110871_part_1.js:22958:15
Error: traverseParentPath(...): Cannot traverse from and to the same ID, ``. 0110871_part_1.js:24170:273936
Error: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner). 0110871_part_1.js:22958:15

Do you have any idea how this could be fixed? Comments in #606 seem to point to a duplicate React dependency.

mcorteel on 25 Aug 2017

Sorry, in a first glance it worked but soon I ended up with similar errors...

After all my solution was creating a dedicated vendors.js bundle:

import React from 'react';
import ReactDOM from 'react-dom';
import ReactSelect from 'react-select';

window.React = React;
window.ReactDOM = ReactDOM;
window.Select = ReactSelect;

This is far better than bundling this vendors with my application code, otherwise the bundle time is slow as hell...

pateketrueke on 25 Aug 2017

@JedWatson I see you have resumed work on this project, this is great!
Is there a reason for the build change? It makes it impossible to use the dist version of react-select since 1.0.0-rc.4.

mcorteel on 12 Sep 2017

@mcorteel a lot of reasons, yes - let's discuss that in a separate issue though if you have specific things that are breaking for you (please report with details). A lot of issues with the new dist build have been solved in rc.8

This particular issue should have been fixed with the 2.0.0 release of react-input-autosize, which has been rewritten without create-react-class (see the new standalone demo in react-select: https://github.com/JedWatson/react-select/blob/master/examples/src/standalone.html)