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

Question

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

import 'jquery';
import 'bootstrap';

我尝试了另一种语法...

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

但结果是一样的...

类型错误：无法读取未定义的 jQueryDetection /node_modules/bootstrap/dist/js/bootstrap.js:243:26 的属性“jquery”

我颠倒了进口的位置，但不起作用......

我在 index.js 页面中，并且...我安装了两个软件包

Answer 1

这里的问题是您的页面bootstrap在此页面加载时尝试导入，包括当 Next.js 服务器（或next export进程）在服务器端呈现页面时。但是，Bootstrap 不能在服务器端运行，因为它window.jquery作为启动过程的一部分进行查找，并且window在节点环境中是未定义的。

为了解决这个问题，你必须包装的进口bootstrap，jquery以及popper.js在一个检查，以确保它们只进口在客户端：

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