无法使用react-bootstrap的<Button>组件，报错dispatcher is null

错误堆栈 #

dispatcher is null
useContext@http://localhost:3000/static/js/bundle.js:43381:7
useBootstrapPrefix@http://localhost:3000/static/js/bundle.js:40752:56
../../node_modules/react-bootstrap/esm/Button.js/Button<@http://localhost:3000/static/js/bundle.js:40670:84
renderWithHooks@http://localhost:3000/static/js/bundle.js:21292:31
updateForwardRef@http://localhost:3000/static/js/bundle.js:23863:24
beginWork@http://localhost:3000/static/js/bundle.js:25910:20
callCallback@http://localhost:3000/static/js/bundle.js:10884:18
invokeGuardedCallbackDev@http://localhost:3000/static/js/bundle.js:10928:20
invokeGuardedCallback@http://localhost:3000/static/js/bundle.js:10985:35
beginWork$1@http://localhost:3000/static/js/bundle.js:30859:32
performUnitOfWork@http://localhost:3000/static/js/bundle.js:30106:16
workLoopSync@http://localhost:3000/static/js/bundle.js:30029:26
renderRootSync@http://localhost:3000/static/js/bundle.js:30002:11
performConcurrentWorkOnRoot@http://localhost:3000/static/js/bundle.js:29396:78
workLoop@http://localhost:3000/static/js/bundle.js:37423:46
flushWork@http://localhost:3000/static/js/bundle.js:37401:18
performWorkUntilDeadline@http://localhost:3000/static/js/bundle.js:37638:25

相关代码 #

组件代码（AddToCart.js） #

import Button from 'react-bootstrap/Button';

function AddToCart(){
  return (
    <Button variant="primary">Add To Cart</Button> // 无法正常渲染，但普通HTML标签可以正常显示
  );
}

export default AddToCart

index.js代码 #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import AddToCart from './components/AddToCart.js';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <AddToCart /> 
  </React.StrictMode>
);

reportWebVitals();

index.html代码 #

<div class="col-3 text-center">
    <img src="./images/WavSupply-Sidepce-Elysium-Loop-Kit-920x920.jpg">
    <h4>PRODUCT</h4>
    <p>$50.00</p>
    <div id="root"></div>
</div>

补充说明 #

• 渲染普通HTML标签时页面正常显示
• 已确认react-bootstrap已成功安装并导入，无导入相关错误

解决方法 #

这个错误的核心原因是React-Bootstrap组件需要在Bootstrap的上下文提供者（BootstrapProvider）中使用，当前代码未全局包裹该提供者，导致useContext钩子无法获取所需上下文，从而抛出错误。

具体修复步骤：

1. 在index.js中导入BootstrapProvider：

import { BootstrapProvider } from 'react-bootstrap';

2. 将应用组件包裹在BootstrapProvider内部：

root.render(
  <React.StrictMode>
    <BootstrapProvider>
      <AddToCart /> 
    </BootstrapProvider>
  </React.StrictMode>
);

另外，确保已安装原生Bootstrap样式依赖（React-Bootstrap依赖其CSS），未安装则执行：

npm install bootstrap

并在index.js中导入Bootstrap的CSS：

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

完成以上操作后，Button组件即可正常渲染。

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