Next.js项目调用carousel方法报$(...).carousel is not a function错误

错误原因 #

$(...).carousel is not a function错误的核心诱因有两个：

• 仅引入了Bootstrap的CSS文件，未引入Bootstrap的JavaScript核心文件，carousel是Bootstrap JS封装的jQuery扩展方法，缺失JS文件自然无法调用
• 技术栈混用冲突：同时引入了react-bootstrap组件库，又用原生jQuery操作Bootstrap DOM，react-bootstrap本身已经封装了所有Bootstrap组件的原生逻辑，不需要依赖jQuery，二者混用很容易出现上下文冲突

修复方案 #

你可以选择以下任意一种方案适配你的技术栈：

方案1：保留原有jQuery+原生Bootstrap实现 #

如果你要沿用原有的原生Bootstrap多卡片轮播逻辑，按以下步骤修改：

1. 安装缺失的依赖：

npm install jquery popper.js bootstrap

2. 调整useEffect逻辑，适配Next.js服务端渲染特性，同时修复原代码的重复执行问题：

useEffect(() => {
  // Next.js服务端渲染阶段没有window对象，仅在客户端环境加载JS依赖
  if (typeof window !== 'undefined') {
    // 将jQuery挂载到window对象，让Bootstrap JS可以识别到
    window.$ = window.jQuery = require('jquery');
    require('popper.js');
    require('bootstrap/dist/js/bootstrap.min.js');
  }

  $('#recipeCarousel').carousel({
    interval: 5000,
  });

  $('#recipeCarousel.carousel .carousel-item').each(function () {
    var minPerSlide = 3;
    var next = $(this).next();
    if (!next.length) {
      next = $(this).siblings(':first');
    }
    next.children(':first-child').clone().appendTo($(this));

    for (var i = 0; i < minPerSlide; i++) {
      next = next.next();
      if (!next.length) {
        next = $(this).siblings(':first');
      }
      next.children(':first-child').clone().appendTo($(this));
    }
  });
// 增加空依赖数组，仅在组件挂载时执行一次，避免重复克隆DOM节点
}, []);

方案2：改用纯react-bootstrap实现（更推荐） #

完全抛弃jQuery依赖，用react-bootstrap自带的Carousel组件实现多卡片轮播，完全适配React+Next.js技术栈，不会出现服务端渲染兼容问题。你可以直接自定义Carousel的Item组件，每个Item内放入3个Card节点即可实现多卡片同屏效果，不需要手动克隆节点，逻辑更简洁。

额外注意事项 #

原有代码的useEffect没有配置依赖数组，会在组件每一次重渲染时都执行一遍，导致DOM节点被反复克隆，最终页面性能严重下降，无论选哪种方案都必须补充依赖数组。

内容的提问来源于stack exchange，提问作者Shanka Somasiri