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

Question

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

try once like this import Button from 'react-bootstrap/Button'; — Arpit
– Arpit, Commented Jul 4, 2020 at 13:23
It also fails with the same error (just replacing 'react-bootstrap' with 'react-bootstrap/Button'). — naughie
– naughie, Commented Jul 4, 2020 at 13:36
Please share your demo code on codesandbox codesandbox.io/s/vigilant-almeida-2kntm — Arpit
– Arpit, Commented Jul 6, 2020 at 16:23

Raj · Accepted Answer · 2020-07-04 12:52:11Z

2

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

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

answered Jul 4, 2020 at 12:52

Raj

311 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

naughie Over a year ago

Unfortunately, it did not fix the problem. After all, I am using Docker, so it does not seem that I have something wrong with cache.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related