javascript - 尝试在 Next.JS 上导入 Bootstrap，但显示 "TypeError: Cannot read property ' jquery' of undefined”

Question

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

import 'jquery';
import 'bootstrap';

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

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

但是结果是一样的...

TypeError: Cannot read property 'jquery' of undefined jQueryDetection /node_modules/bootstrap/dist/js/bootstrap.js:243:26

我颠倒了导入的位置，但不起作用...

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

Answer 1

这里的问题是，每当该页面加载时，您的页面都会尝试导入 bootstrap ，包括当该页面由 Next.js 服务器(或由 下一个导出 过程)。但是，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");
}