React-select: imports broke in v1.0.0-rc.7?

[maxefi]

I have a project, where I use your super-cool react-select lib.

today nice guy came to the project and clone the repo and etc. so the case:
in package.json:

"dependencies": {
     "react-select": "^1.0.0-rc.5",
}

so obv. when I do npm i ├─┬ [email protected] is being installed.

after the packages are installed I'm trying to build my thing with webpack and getting those errors:

5:51  error    Unable to resolve path to module 'react-select'    import/no-unresolved
5:51  error    Missing file extension for "react-select"          import/extensions

this is how it's being imported to the component:
import Select, { AsyncCreatable, Creatable } from 'react-select';

with "react-select": "1.0.0-rc.5", installed everything works as a charm.

any help is appreciated and thx again for the fine lib.

[tobilen]

same problem here. possibly related to https://github.com/JedWatson/react-select/issues/1971 ?

[GitShaffi]

Facing same problem!

[noelstieglitz]

Yep me too. I downgraded to 1.0.0-rc.5 based on the issue linked in @tobilen's comment. Let me know if you need a hand digging into the root cause.

[SeeThruHead]

same problem here, eslint-plugin-import failing my builds

[LYF1999]

same problem. I find that this module installed in my project. no this dist/react-select.es.js file in
/node_modules/react-select/

[gwyneplaine]

Hey all, a fix for this issue is in master at the moment, and will make it into a new rc shortly.

[nicubarbaros]

sam problem )

[acronoah]

Just wasted a good 15 minutes on this with a team member. Perils of using open source I guess. A better release process perhaps?

[gwyneplaine]

@acronoah I'm sorry to hear that, can I confirm that you're still experiencing this issue in the latest release? [email protected]

[em0ney]

[email protected] has resolved this for me. Thanks for the quick turn around

[gwyneplaine]

thanks for confirming this @em0ney!
@maxefi can i confirm that this is also fixed for you with the latest release?

[JedWatson]

A better release process perhaps?

Sorry for the trouble - we implemented an entirely new build and are supporting a whole lot of environments / build configurations that are hard to know about in advance (this was specific to a version and configuration of webpack, it worked in our test setup so this has been a learning curve) as well as providing backwards compatibility with how the bundle was consumed two years ago.

On the upside, we now have that better release process and it should be solid going forward so thanks everyone for the patience as we get it sorted out to support all the many ways people include front-end packages in their apps 👍

I'm going to close this because from what I can tell we've now got it right in rc.9, if anyone is still experiencing issues on that version please open a new issue with specifics about your bundle process, versions and config so we can help.

[noah79]

Here's how I've managed to hack around it. Note that I'm in a typescript environment. I tried both import * as ReactSelect from 'react-select' as well as import ReactSelect from 'react-select'. Both ended up giving me an object with '.default' on them containing the actual ReactSelectAsync class I wanted.

So my solution:

const reactSelect = require('react-select') as any;
const ReactSelect = reactSelect.default as ReactSelect.ReactSelectAsyncClass;
// import * as ReactSelectModule from 'react-select';  // Does not work on new versions of react-select
export {ReactSelect};

I have allowSyntheticDefaultImports turned on in my tsconfig.