Trying to import Bootstrap on Next.JS but says "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 服务器（或 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");
}

Answer 2

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

Trying to import Bootstrap on Next.JS but says "TypeError: Cannot read property 'jquery' of undefined"

Trying to import Bootstrap on Next.JS but says "TypeError: Cannot read property 'jquery' of undefined"

javascript

jquery

next.js