React-Bootstrap组件报错TS2786：无法作为JSX组件使用

问题描述 #

按照React-Bootstrap官网示例编写Offcanvas组件，运行时触发TS2786错误，提示：

Row cannot be used as a JSX component. Its return type ReactNode is not a valid JSX element. Type undefined is not assignable to type Element | null

所有Bootstrap组件均出现该问题，已尝试重新导入依赖、重装Bootstrap、检查package.json，问题仍未解决。

示例代码 #

import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Offcanvas from 'react-bootstrap/Offcanvas';

function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch
      </Button>

      <Offcanvas show={show} onHide={handleClose}>
        <Offcanvas.Header closeButton>
          <Offcanvas.Title>Offcanvas</Offcanvas.Title>
        </Offcanvas.Header>
        <Offcanvas.Body>
          Some text as placeholder. In real life you can have the elements you
          have chosen. Like, text, images, lists, etc.
        </Offcanvas.Body>
      </Offcanvas>
    </>
  );
}

export default Example;

解决方案 #

• 版本兼容性检查：React-Bootstrap与React、React-DOM版本不匹配是核心诱因。比如React-Bootstrap v2.x要求React 16.14+，v3.x要求React 18+。打开package.json核对版本，不匹配则调整：

  # 升级到React 18（适配React-Bootstrap v3+）
  npm install react@latest react-dom@latest
  # 或根据React-Bootstrap版本安装对应React版本
  

• 清理缓存并重建：缓存问题可能导致类型校验异常，执行以下步骤：

  rm -rf node_modules package-lock.json
  npm install
  npx tsc --clean
  # 重启本地开发服务器
  

• 修正TypeScript配置：确保tsconfig.json的jsx配置符合React版本，React 18推荐设为"react-jsx"，同时lib数组包含DOM相关类型：

  {
    "compilerOptions": {
      "jsx": "react-jsx",
      "lib": ["dom", "es2020"]
    }
  }
  

• 确认组件导入方式：避免导入方式错误，确保从react-bootstrap正确导入组件：

  // 推荐的批量导入方式
  import { Button, Offcanvas } from 'react-bootstrap';
  

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