Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
like image 661
naughie Avatar asked Sep 16 '25 20:09

naughie


1 Answers

  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.

like image 187
Raj Avatar answered Sep 19 '25 12:09

Raj