Module not found: Error: Can't resolve 'react-select' with typescript

Question

module import is not working for me. I'm tried different solutions provided from stack overflow and other. These are steps I'm follow the react-select

npm install --save @types/react-select

import the module like this

import Select from "react-select"

but I got the error

Module not found: Error: Can't resolve 'react-select'

import * as React from "react";
import ReactSelect from 'react-select'
export class Select extends extends React.Component<someProps>{

render(){
   return(
  <Select id="color" options={options} />
);
}
}

But I can't find the way to fixed this.

Failure

Where does this error occur: Module not found: Error: Can't resolve 'react-select'? Is it shown by TS in editor or by JS in runtime? – Kleeman

it's came at the run the project. js run time – Failure

Did you run the bundling process after installing the package? Does npm list --depth=0 shows react-select? – Kleeman

I tried it now. It's there in the list – Failure

You didn't answer about bundling though – Kleeman

I did't get that. You need to webpack configurations also? – Failure

Every time you make some edits to your code, as well as when installing a package, you have to rebuild (re-bundle) your project. So if you use Webpack (npm run build), you should run it. If you use create-react-app, you should run npm start – Kleeman

Yes. I did it too. – Failure

Let us continue this discussion in chat. – Failure

Sorry I ran out of ideas. My guesses is something is wrong with your build process, or maybe... there's a hidden character in the module name (I would retype it by hand) :D – Kleeman

ohh!! thanks you for helped me – Failure

Answer 1

I found the issue having here. Issue is both @types/react-select and react-select added to the package.json

Failure

This was the solution that I got. – Failure

Answer 2

I got solution by npm i react-select.

Measure

It helps more if you supply an explanation why this is the preferred solution and explain how it works. We want to educate, not just provide code. – Sarraute

Actually I dont know more then that on this topic but I got the solution with this. So for other case should I provide solutions even I dont know explanation ? – Measure

It's not a good idea to provide answers if you don't know if, or how, they work. – Sarraute

Might be not a good idea but some one gets the solution which is more important I think ? – Measure

Thanks @AshwaniPanwar. Worked for me. Seems like react needs bare installation - npm i/install react-select as opposed to - npm install @types/react-select! – Cathrine

Answer 3

You have an error:

npm install --save @type/react-select

instead of

npm install --save @types/react-select

Also I would recommend to use --save-dev instead of --save because you don't need typings in production.

Kleeman

yar sorry for that I'm used the npm install --save @types/react-select it's same as you provided. In the questions it should be edited. – Failure

yar I had use environment too. but this snippets for the example how im used it – Failure

It's also correct in the code. only error I got is Module not found: Error: Can't resolve 'react-select' – Failure

Answer 4

My error was a bit different since it involves react-select-async-paginate.

So in my case, I had to use,

npm install react-select react-select-async-paginate

or

yarn add react-select react-select-async-paginate

Hope this helps someone :)

Demigod

Answer 5

In my case, the problem was that the project I am working on uses an old version of react-select. In version 5, react-select was rewritten in typescript, and the types package (@types/react-select) became a stub package, with no actual type definitions in it.

So if you are using react-select in version <5, you have to specify the version of the types definitions package, that matches (or is close to) the version you are using. For example, if your react-select is in version 3.2.0, the definition in package.json would be:

"devDependencies": {
    "@types/react-select": "^3.1.2"
  }

For available versions of the package, visit https://www.npmjs.com/package/@types/react-select?activeTab=versions

Deedee