CODEWITHSUNDEEP
reactjstypescripttwitter-bootstrapreact-bootstrap
naughie
naughie

Reputation: 315

Cannot find module 'react-bootstrap' with module other than commonjs

I use React with Typescript, but cannot use React Bootstrap with a module other than commonjs.

I first install react-bootstrap package:

$ npm i react-bootstrap

And then write the code to use it, for example,

// src/index.tsx
import { Button } from 'react-bootstrap';

But compiling it by npx tsc get an error Cannot find module 'react-bootstrap' or its corresponding type declarations. When I googled about this issue, I found that react-bootstrap has its own types (so I do not need @types/react-bootstrap).

If I set module in tsconfig.json to commonjs, then I can compile it correctly.

Why cannot I use react-bootstrap however? Are there other ways to use React Bootstrap together with Typescript (and with modules other than commonjs)?

The minimal example here:

package.json:

{
  "name": "foo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "type": "npx tsc --noEmit",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.9.5"
  },
  "dependencies": {
    "react-bootstrap": "^1.0.1"
  }
}

tsconfig.json:

{
  "compilerOptions": {
    "target": "es2015",
    "module": "es2015",
    "skipLibCheck": true
  },
  "include": [
    "src/**/*"
  ]
}

src/index.tsx:

import { Button } from 'react-bootstrap';

Then run

$ npm run type

> [email protected] type /home/bar/src/foo
> npx tsc --noEmit

src/index.tsx(1,24): error TS2307: Cannot find module 'react-bootstrap' or its corresponding type declarations.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] type: `npx tsc --noEmit`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] type script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/bar/.npm/_logs/2020-07-04T12_11_17_351Z-debug.log

Upvotes: 4

Views: 8627

Answers (1)

Raj
Raj

Reputation: 31

  1. Clean npm modules cache using $ npm cache clean --force
  2. Delete node_modules by $ rm -rf node_modules package-lock.json or delete it manually
  3. Install npm modules npm install

This worked for me. Hopes it works for you too.

Upvotes: 2

Related Questions