我正在尝试将 Bootstrap 5.3.2（不是 React-Bootstrap）导入到使用新 App Router 的 NextJS 14.1.0 项目中。我想以编程方式使用单独的 BS 组件（而不是通过数据属性）。 我让它工作了，但是（我确实得到了工具提示）但我无法在每次硬刷新时摆脱这个错误 500。控制台显示了这个确切的消息：
⨯ node_modules/bootstrap/dist/js/bootstrap.esm.js (803:18) @ document
⨯ ReferenceError: document is not defined
at __webpack_require__ (/Users/rsilva/Desktop/bs/.next/server/webpack-runtime.js:33:42)
at eval (./app/TooltipComponent.js:9:67)
at (ssr)/./app/TooltipComponent.js (/Users/rsilva/Desktop/bs/.next/server/app/page.js:162:1)
at __webpack_require__ (/Users/rsilva/Desktop/bs/.next/server/webpack-runtime.js:33:42)
这是我的相关代码：
布局.js
import "bootstrap/dist/css/bootstrap.css";
import BootstrapProvider from "./providers/bootstrap";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className="container my-5">
<BootstrapProvider/>
{children}
</body>
</html>
);
}
我的 BS 提供商（bootstrap.js）：
"use client";
import { useEffect } from 'react';
function BootstrapProvider() {
useEffect(() => {
async function loadBootstrap() {
const bootstrap = await import('bootstrap/dist/js/bootstrap.bundle.min.js');
window.bootstrap = bootstrap;
}
loadBootstrap();
}, []);
return null;
}
export default BootstrapProvider;
page.js
import { TooltipComponent } from "./TooltipComponent";
export default function Home() {
return (
<main>
<TooltipComponent title="Test">
test tooltip
</TooltipComponent>
</main>
);
}
最后是以编程方式使用工具提示的实际组件：
"use client";
import { useEffect, useRef } from "react";
import { Tooltip } from "bootstrap";
export function TooltipComponent({
children,
title = "Missing tooltip 'title' property",
placement = "top",
trigger = "hover",
}) {
const tooltipRef = useRef();
useEffect(() => {
if (title) {
const tooltip = new Tooltip(tooltipRef.current, {
title: title,
placement: placement,
trigger: trigger,
container: "body",
});
return () => {
tooltip.dispose();
};
}
}, [title]);
return <span ref={tooltipRef}>{children}</span>;
}
有什么想法吗？谢谢！