React中调用owlCarousel报错：该方法不是函数的问题求助

问题背景 #

在React组件TopEventSection.jsx中集成Owl Carousel轮播组件，已确认依赖安装完成，且在index.html中引入了相关脚本，但运行时出现错误：jquery__WEBPACK_IMPORTED_MODULE_2___default(...)(...).owlCarousel is not a function

解决方案 #

• 移除重复的jQuery引入
  组件内已经通过import $ from 'jquery'引入了jQuery，同时index.html中又引入了一次，导致出现两个独立的jQuery实例。Owl Carousel挂载到了index.html的jQuery上，但组件代码调用的是另一个实例，因此找不到owlCarousel方法。
  处理方式：删除index.html中的jQuery引入脚本。

• 调整依赖导入顺序
  确保先导入jQuery，再导入Owl Carousel，这样Owl Carousel才能正确绑定到jQuery对象上。修改组件内的导入代码：

  // 移除重复的 import 'jquery'; 只保留下面一行
  import $ from 'jquery';
  import 'owl.carousel';
  

• 补充Owl Carousel样式文件
  大部分情况下，Owl Carousel需要依赖自身的CSS才能正常工作，在组件中添加样式导入：

  import 'owl.carousel/dist/assets/owl.carousel.css';
  import 'owl.carousel/dist/assets/owl.theme.default.css';
  

• 使用React Ref替代全局选择器（推荐）
  直接使用$('.owl-carousel')可能存在DOM未完全渲染或多个组件冲突的问题，改用React的useRef来获取目标DOM元素，更符合React的开发范式：

  import React, { useEffect, useRef } from "react";
  import img from "../images/date.svg";
  import $ from 'jquery'
  import 'owl.carousel'
  import 'owl.carousel/dist/assets/owl.carousel.css';
  import 'owl.carousel/dist/assets/owl.theme.default.css';
  
  export default function TopEventSection() {
      const carouselRef = useRef(null);
  
      useEffect(() => {
          if (carouselRef.current) {
              $(carouselRef.current).owlCarousel({
                  loop: true,
                  margin: 10,
                  nav: true,
                  responsive: {
                      0: { items: 1 },
                      600: { items: 3 },
                      1000: { items: 5 }
                  }
              });
          }
      }, []);
  
      return (
          <div className="top-event-section">
              <div className="container">
                  <h2><span className="header-blue">ТОП</span> події:</h2>
                  <div className="owl-carousel" ref={carouselRef}>
                      <div className="item"><img src={img} alt="img1" /></div>
                      <div className="item"><img src={img} alt="img2" /></div>
                      <div className="item"><img src={img} alt="img3" /></div>
                  </div>
              </div>
          </div>
      )
  }
  

• 清理缓存并重新构建
  若上述操作后仍有问题，可能是Webpack缓存导致依赖加载异常，执行以下命令重置：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  npm run start
  

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