React-select: dist/react-select doesn't work in an AMD environment

[pixeldrew]

Due to browserify's (or browserify-shim) way of referencing global objects, in an AMD environment React isn't available as window.React. Which will cause the module to fail to load.

webpack has the ability to transform to UMD which would work in an AMD and commonJS scenario.

[paulkoerbitz]

I am having the same issue. Using webpack in the react-select base directory as follows

webpack --output-library "react-select" --output-library-target umd . react-select.js

solved the problem for me. I am now having a different error (prevComponentInstance is null), but I think this is unrelated.

[trmjoa]

I solved this problem with webpack aswell.
A short webpack config like this should do the trick:

module.exports = {
entry : {
"react-select" : "react-select/lib/Select.js"
},
output : {
path: "web/static/dist/external/",
filename : "[name].bundle.js",
chunkFilename : "[id].bundle.js",
libraryTarget : "amd"
},
externals : [
"react"
]
};

[mondaychen]

@paulkoerbitz Thanks for the workaround

[jvmlet]

+1 for this issue, meanwhile here is my workaround :

 requirejs.config({
shim: {
"react-select":{
    deps:['reactSelectDep']
}
}
 paths: {
'react-select':'webjars/react-select/0.6.7/dist/react-select.min',
'react-input-autosize':'webjars/react-input-autosize/0.5.0/dist/react-input-autosize.min',
'classnames':'webjars/classnames/2.1.3/index'
}
}

define('reactSelectDep',['react-input-autosize','classnames'],function(autoSize,classNames){
            window['classNames'] = classNames;
            window['AutosizeInput'] = autoSize;
            return {};
        })

Please support react-select in AMD env.
Thanks

[jochenberger]

Unfortunately the workaround will not work with current versions as react-input-autosize also requires React to be globally available.

[jvmlet]

I've posted the idea, you can extend it to define React globaly for react-input-autosize

[pixeldrew]

I've created a webpack fork that includes react-input-autosize. Since it's using babel you'll need to have babelHelpers included in the page. See https://github.com/Razorfish-East/react-select/blob/master/dist/react-select-umd.js

[jochenberger]

Still an issue with 1.0.0-beta12

[jochenberger]

@JedWatson, I think this can be closed, probably along with #1766. :-)

[jossmac]

Version 1 of react-select is no longer supported.

In the best interest of the community we've decided to spend the time we have available on the latest version.

We apologise for any inconvenience.

Please see:

1. v1 to v2 upgrade guide
2. v1 documentation and examples