React项目中使用owl-carousel报错的技术求助

环境版本 #

• React 18.2.0
• react-owl-carousel 2.3.3
• Bootstrap 5.3.0

错误信息 #

OwlCarousel.js:1758 Uncaught TypeError: Cannot read properties of undefined (reading 'fn')
    at OwlCarousel.js:1758:1
    at OwlCarousel.js:1795:1
    at OwlCarousel.js:2:1
    at ./node_modules/react-owl-carousel/umd/OwlCarousel.js (OwlCarousel.js:5:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/Homepage/Homepage.jsx (Divider.jsx:22:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)

问题原因 #

react-owl-carousel 2.x版本底层依赖jQuery，但Bootstrap 5已移除对jQuery的依赖，当前项目全局环境中不存在jQuery对象，导致Owl Carousel无法调用$.fn方法，触发该错误。

解决方案 #

方案1：引入jQuery并全局挂载 #

1. 安装jQuery依赖

npm install jquery --save

2. 在项目入口文件（如src/index.jsx）中引入并全局挂载jQuery

import $ from 'jquery';
window.$ = window.jQuery = $;

3. 正常引入react-owl-carousel组件及样式

import OwlCarousel from 'react-owl-carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

方案2：替换为无jQuery依赖的React轮播组件 #

若不想引入jQuery避免潜在冲突，可使用纯React实现的轮播组件替代，比如：

• react-slick：功能丰富，支持响应式，无外部依赖
• react-responsive-carousel：轻量易用，API简洁

注意事项 #

引入jQuery后可能与Bootstrap 5的部分功能产生兼容性问题，建议集成后全面测试页面交互。

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