React项目引入Bootstrap组件报错：class constructors must be invoked with 'new'

问题根源 #

你直接从bootstrap包导入的Button是原生Bootstrap的JavaScript类组件，这类组件需要通过new关键字实例化使用，但React的JSX是直接渲染组件的语法，两者不兼容，才触发了这个报错。之前尝试的换Node版本、清缓存、重装npm等操作都是环境层面的调整，没触及问题本质，所以无效。

两种可行解决方案 #

方案1：使用原生Bootstrap的HTML类（无需导入JS组件） #

直接用普通的<button>标签搭配Bootstrap的CSS类即可，不需要导入Bootstrap的JS组件：

import logo from "./logo.svg";
import "./App.css";
import "bootstrap/dist/css/bootstrap.css";

function App() {
    return <button className="btn btn-primary">Add</button>;
}

export default App;

方案2：使用React Bootstrap（React专属适配库） #

如果想保留组件式的写法，需要安装专门为React适配的react-bootstrap库：

1. 安装依赖

npm install react-bootstrap bootstrap

2. 修改组件代码

import logo from "./logo.svg";
import "./App.css";
import { Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
    return <Button variant="primary">Add</Button>;
}

export default App;

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