React项目使用owl.carousel报错：TypeError: Cannot read property 'fn' of undefined

这个错误的核心原因是：owl.carousel插件依赖全局的jQuery/$对象，但你在React中只是局部引入了jQuery，并没有把它挂载到全局window对象上，导致插件初始化时找不到全局的$，从而抛出Cannot read property 'fn' of undefined的错误。

下面给你几种可行的解决方法：

方法一：手动将jQuery挂载到全局window对象 #

这是最直接的方案，不需要修改webpack配置，适合快速验证：

修改你的App.js代码，先把局部引入的jQuery挂载到全局，再引入owl.carousel：

import React, { Component } from 'react';
import $ from 'jquery';

// 关键步骤：把jQuery挂载到全局window对象
window.$ = $;
window.jQuery = $;

// 现在再引入owl.carousel插件
import 'owl.carousel';
// 务必引入插件的样式文件，否则轮播样式会异常
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

class App extends Component {
  componentDidMount() {
    // 确保DOM元素已渲染后再初始化轮播
    $('.team-slides').owlCarousel({
      // 这里添加你的配置选项，比如：
      loop: true,
      margin: 15,
      nav: true,
      responsive: {
        0: { items: 1 },
        768: { items: 2 },
        1024: { items: 3 }
      }
    });
  }

  render() {
    return (
      <div className="team-slides">
        {/* 你的轮播项 */}
        <div className="item">Slide 1</div>
        <div className="item">Slide 2</div>
        <div className="item">Slide 3</div>
      </div>
    );
  }
}

export default App;

如果是函数组件（使用React Hooks），可以用useEffect替代componentDidMount，同时添加清理逻辑避免内存泄漏：

import React, { useEffect } from 'react';
import $ from 'jquery';

window.$ = $;
window.jQuery = $;

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

function App() {
  useEffect(() => {
    const carousel = $('.team-slides').owlCarousel({
      loop: true,
      margin: 15,
      nav: true,
      items: 3
    });

    // 组件卸载时销毁轮播实例
    return () => {
      carousel.trigger('destroy.owl.carousel');
    };
  }, []);

  return (
    <div className="team-slides">
      <div className="item">Slide 1</div>
      <div className="item">Slide 2</div>
      <div className="item">Slide 3</div>
    </div>
  );
}

export default App;

方法二：通过Webpack配置全局注入jQuery #

如果你的项目是基于Webpack构建（比如使用create-react-app但已经eject，或者自定义Webpack配置），可以通过ProvidePlugin让Webpack自动将jQuery注入到所有模块的全局作用域：

在你的webpack.config.js中添加以下配置：

const webpack = require('webpack');

module.exports = {
  // ...其他已有的配置项
  plugins: [
    // 全局注入jQuery
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })
  ]
};

配置完成后，你就不需要在App.js里手动挂载window.$了，直接引入jQuery和owl.carousel即可：

import React, { Component } from 'react';
import $ from 'jquery';
import 'owl.carousel';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';

// ...后续初始化代码和之前一致

补充：如果使用create-react-app且不想eject #

可以使用craco（Create React App Configuration Override）来修改Webpack配置，无需eject：

1. 安装craco：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js：

const webpack = require('webpack');

module.exports = {
  webpack: {
    plugins: {
      add: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery'
        })
      ]
    }
  }
};

3. 修改package.json中的启动脚本：

{
  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
}

注意事项 #

• 一定要引入owl.carousel的CSS文件，否则轮播的布局和样式会完全异常；
• 确保在componentDidMount或useEffect中初始化轮播，因为这两个生命周期钩子会在DOM渲染完成后执行，能保证$('.team-slides')可以找到对应的DOM元素；
• 如果你的轮播内容是动态生成的（比如从接口获取数据），需要等待数据加载完成后再初始化轮播，或者调用轮播的refresh方法更新内容。

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