尝试在Next.JS上导入Bootstrap,但显示“类型错误:无法读取未定义”“的属性'jquery'

vom3gejh  于 2023-03-17  发布在  jQuery
关注(0)|答案(3)|浏览(110)

我正在尝试从Next.js项目导入Bootstrap。导入的顺序是:

import 'jquery';
import 'bootstrap';

我试过另一种语法...

require('jquery');
require('bootstrap');

但结果是一样的...
类型错误:无法读取未定义的jQueryDetection /node_modules/bootstrap/dist/js/bootstrap的属性'jquery'。js:243:26
我颠倒了导入的位置,但不起作用...
我在index.js页面,和...我有两个软件包安装

h5qlskok

h5qlskok1#

这里的问题是,每当加载此页面时,您的页面都试图导入bootstrap,包括当Next.js服务器(或next export进程)在服务器端呈现此页面时。但是, Bootstrap 不能在服务器端运行,因为它在启动过程中查找window.jquery,而window在节点env中未定义。
要解决此问题,您必须将bootstrapjquerypopper.js的导入包含在检查中,以确保它们仅在客户端导入:

// At the top of _app.tsx or your individual page:
if (typeof window !== "undefined") {
  require("jquery");
  require("popper.js");
  require("bootstrap");
}
3zwtqj6y

3zwtqj6y2#

Sample _app.tsx基于@Zack的答案,但是这个例子使用了导入来获得完全兼容的代码

// _app.tsx page
export default function MyApp({ Component, pageProps }) {

  if (globalThis.window !== undefined) {
    import("jquery").then(() => { import("bootstrap"); });
  }

  return <Component {...pageProps} />
}
yruzcnhs

yruzcnhs3#

我也试图解决这个问题,但我使用的是react-bootstrap,它工作正常

相关问题