Reactjs 找不到模块'；react引导&x27；使用commonjs以外的模块

我使用React with Typescript，但不能将React Bootstrap与

commonjs

以外的模块一起使用

我首先安装react引导程序包：

$ npm i react-bootstrap

然后编写代码来使用它，例如

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

但是通过

npx-tsc

编译它时出现错误

找不到模块'react-bootstrap'或其相应的类型声明。

当我搜索这个问题时，我发现

react-bootstrap

有自己的类型（因此我不需要

@types/react-bootstrap

）

如果我将

tsconfig.json

中的

module

设置为

commonjs

，那么我可以正确编译它

但是，为什么我不能使用

react引导程序

？是否有其他方法将React引导与Typescript（以及除

commonjs

之外的模块）一起使用

这里最简单的例子是：

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"
  }
}

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

tsconfig.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"
  }
}

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

src/index.tsx

：

import { Button } from 'react-bootstrap';

然后跑

$ npm run type

> foo@1.0.0 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! foo@1.0.0 type: `npx tsc --noEmit`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the foo@1.0.0 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

使用

$npm缓存清理--强制执行

通过

$rm-rf node_modules package lock.json删除节点模块，或者手动删除它

安装npm模块

npm安装

这对我有用。希望它对你也有用

使用

$npm缓存清理--强制执行

通过

$rm-rf node_modules package lock.json删除节点模块，或者手动删除它

安装npm模块

npm安装

---

这对我有用。希望它也能对您起作用。

像这样尝试一次

从“react bootstrap/Button”导入按钮它也会因同样的错误而失败（只是将“react bootstrap”替换为“react bootstrap/Button”）。请在codesandbox上共享您的演示代码，像这样尝试一次
从“react bootstrap/Button”导入按钮它也会失败，并出现相同的错误（只是将“react bootstrap”替换为“react bootstrap/Button”）。请在codesandbox上共享您的演示代码。不幸的是，它没有解决问题。毕竟，我使用的是Docker，所以缓存似乎没有问题。不幸的是，它没有解决问题。毕竟，我使用的是Docker，所以缓存似乎没有什么问题。