React-select: invariant.js:44 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function

Created on 27 Apr 2017 · 16Comments · Source: JedWatson/react-select

    import * as React from 'react';
    import ComponentForm from "./ComponentForm";


    import Select from 'react-select';
    // Be sure to include styles at some point, probably during your bootstrapping
    import 'react-select/dist/react-select.css';
    import {connect} from "react-redux";

    export interface AppProps {
        componentForm:{}
    }

    export function initAppState(): AppProps {
        return {componentForm:{}};
    }


    var options = [
        { value: 'one', label: 'One' },
        { value: 'two', label: 'Two' }
    ];

    function logChange(val) {
        console.log("Selected: " + val);
    }

    class App extends React.Component<AppProps, {}> {
        constructor(prop) {
            super(prop)
        }

        render() {
            return (
                <div>

                    <Select/>
                    <ComponentForm/>
                </div>

            )
        }
    }


    // export default App;
    export default connect()(App);

inline

package.json

"dependencies": {
"ajv": "^5.0.4-beta.2",
"es6-promise": "^4.0.5",
"history": "4.6.1",
"immutable": "^3.8.1",
"isomorphic-fetch": "^2.2.1",
"lodash": "^4.17.4",
"node-uuid": "^1.4.7",
"package.json": "^2.0.1",
"react": "^15.0.23",
"react-bootstrap": "^0.30.5",
"react-bootstrap-table": "^2.5.5",
"react-dom": "^15.4.2",
"react-json-pretty": "^1.3.1",
"react-redux": "^5.0.4",
"react-router": "^4.1.1",
"react-router-redux": "^4.0.8",
"react-select": "^1.0.0-rc.3",
"redux": "^3.6.0",
"redux-logger": "^2.6.1",
"redux-thunk": "^2.1.0",
"shelljs": "^0.7.7",
"ts-loader": "^2.0.0",
"typescript": "2.2.0-dev.20170206",
"webpack": "^1.13.3",
"webpack-notifier": "^1.4.1"
},

issubug-unconfirmed

Source

weichenghsu

All 16 comments

same here

thomassittig on 27 Apr 2017

same problem here too

OneCyrus on 1 May 2017

Solution: Install dependencies correctly.

react-input-autoresize needs to be exported to window or global as: 'AutosizeInput'.
react needs to be exported to window or global as 'React'.
classnames needs to be exported to window or global as 'classNames'.

Biggest solution: Document this on the installation readme.

@OneCyrus @thomassittig @weichenghsu

Then you will experience the #1063 & #1090 issues.

hegelstad on 8 May 2017

Hi @weichenghsu this should be fixed with the latest version of react-input-autoresize. Also we will be releasing rc5 soon that will fix a regression in rc4.

agirton on 20 May 2017

@agirton, when installing via normal bower command, not specifying any version downloads an old version with many bugs including this one. Updating to newest version and all is good, but hard figure out if you believe that it already downloaded latest version, or atleast a stable version.

hegelstad on 20 May 2017

Hi @hegelstad I understand, but we won't patch older versions. I'm hoping that we can release stable 1.0 soon, and this problem will go away :smile:

agirton on 20 May 2017

Sweet, but the readme/docs should state that bower install react-select downloads an old 'stable' version. I can make a PR?

hegelstad on 20 May 2017

Yes please :smile:

agirton on 20 May 2017

+1 i still have it in 1.0.0-rc5