Question

我有一个新的带有webpack的react项目，正在尝试向其中添加“ react-bootstrap”，并将Alert作为测试来呈现。

所以我已经完成了：

npm install react-bootstrap --save

并确认文件在那里。在我的主要tsx文件中，我有：

import { Alert } from 'react-bootstrap';
...
<Alert variant='success'>Success Alert</Alert>

当我运行npm start来启动服务器时，它会在页面上显示成功警报，这是绝对正确的，但是会出现webpack错误，并显示以下错误：

[tsl] ERROR in ....\src\client-react\components\Header.tsx(9,23)
      TS2307: Cannot find module 'react-bootstrap'.

即使警报已正确显示在下面（并且如果我砍CSS进行显示：在错误启动画面上都没有显示，则在下面看起来也很好吗？

我认为这归结为react-bootstrap软件包没有任何@types（@ types / react-bootstrap适用于较旧的版本，因为它们显然已将类型转换为主软件包），但不确定如何解决。

谢谢！

Answer 1

我正在使用Typescript浏览react-bootstrap中提供的示例。这里的方法是将index.tsx中的包导入为：

import "bootstrap/dist/css/bootstrap.min.css";

我希望您有react-app-env.d.ts个文件来引用react-scripts类型，如果没有创建并添加，该文件会自动生成

/// <reference types="react-scripts" />

因此，在您的 Hello.tsx 中，您可以将Alert中的react-bootstrap导入为：

import Alert from 'react-bootstrap/Alert';