TypeScript项目导入react-bootstrap报模块无导出成员错误如何解决

问题根因 #

1. 类型包与依赖版本不兼容
   react-bootstrap从v2.0.0版本开始已经内置了TypeScript类型定义，不需要额外安装@types/react-bootstrap。你安装的@types/react-bootstrap@0.32.28仅适配react-bootstrap v0.x/v1.x版本，和你本地的react-bootstrap@2.0.2完全不匹配，所以会出现模块导出成员找不到的错误。
2. 依赖版本不匹配
   react-bootstrap v2.x仅适配Bootstrap 5.x版本，你本地安装的是bootstrap@3.4.1，版本不对应也会导致组件渲染异常和类型报错。
3. 代码语法错误
   你写的是函数组件，已经在参数里解构了children，但是在JSX里还写{this.props.children}，函数组件没有this指向，这里会触发运行时报错。
4. 组件API变更
   react-bootstrap v2已经移除了Grid组件，替换为Container组件，原来的fluid属性用法保留。
5. 导入路径冗余
   你导入react-bootstrap时路径末尾多了斜杠，也可能导致模块解析异常。

修复步骤 #

1. 先卸载不兼容的依赖：

npm uninstall @types/react-bootstrap bootstrap@3.4.1

2. 安装适配的Bootstrap版本：

npm install bootstrap@5.1.3

3. 修改Layout.tsx代码：

import * as React from 'react';
import { Col, Container, Row } from 'react-bootstrap';
import NavMenu from './NavMenu';

interface LayoutProps {
    children: React.ReactNode;
}

const Layout = ({ children }: LayoutProps) => {
    return (<Container fluid>
        <Row>
            <Col sm={3}>
                <NavMenu/>
            </Col>
            <Col sm={9}>
                {children}
            </Col>
        </Row>
    </Container>);
}
export default Layout;

4. 修改index.tsx里的CSS引入，bootstrap 5已经没有单独的theme.css，移除对应的引入语句即可：

import 'bootstrap/dist/css/bootstrap.css';

内容的提问来源于stack exchange，提问作者zitrusire2520