React项目中使用Textillate.js时出现jQuery未定义错误求助

我在React项目中遇到如下错误：

jQuery is not defined
ReferenceError: jQuery is not defined
    at ./node_modules/textillate/jquery.textillate.js (http://localhost:3000/static/js/bundle.js:56432:4)
    at options.factory (http://localhost:3000/static/js/bundle.js:94556:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:94001:33)
    at fn (http://localhost:3000/static/js/bundle.js:94213:21)
    at ./src/components/javascripts/Textillate.js (http://localhost:3000/static/js/bundle.js:1300:68)
    at options.factory (http://localhost:3000/static/js/bundle.js:94556:31)
    at __webpack_require__ (http://localhost:3000/static/js/bundle.js:94001:33)
    at fn (http://localhost:3000/static/js/bundle.js:94213:21)
    at ./src/components/About.jsx (http://localhost:3000/static/js/bundle.js:178:81)
    at options.factory (http://localhost:3000/static/js/bundle.js:94556:31)

我已经通过npm安装了jQuery和Textillate.js，但还是出现这个错误，相关代码如下：

Textillate.js #

import $ from 'jquery';
import 'textillate';

const Textillate = () => {
    $('.text').textillate({
        in: {
            effect: 'flash',
            delayScale: 1,
            delay: 25,
            sequence: true
        }
    });
}
export default Textillate;

About.jsx #

import Text from './javascripts/Textillate';

const About = () => {
    React.useEffect(() => {
        Text();
    }, []);
    return (
        <div>
           <h1 className="text">
              abcdefg
           </h1>
        </div>
    )
}
export default About;

请问导致该问题的原因是什么？

核心原因 #

textillate.js是依赖jQuery的插件，但它加载时会直接全局查找jQuery或$变量。你当前仅在组件中局部导入了jQuery，并未将其暴露到全局环境，所以textillate.js找不到jQuery对象，抛出jQuery is not defined错误。

解决方法 #

有两种可行的解决方式：

方式一：将jQuery挂载到全局

在项目入口文件（比如src/index.js）中添加以下代码，把jQuery暴露为全局变量：

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

之后再导入textillate插件，它就能找到全局的jQuery了。

方式二：使用webpack ProvidePlugin自动注入

通过webpack的ProvidePlugin，让编译时自动为依赖jQuery的模块注入jQuery，无需手动全局挂载：

1. 若使用CRA（Create React App）创建项目，需先执行npm run eject暴露配置（注意：该操作不可逆），或使用react-app-rewired修改配置；
2. 在webpack配置文件的plugins数组中添加：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

这样webpack会自动在需要jQuery的模块中注入$和jQuery变量，textillate.js即可正常加载。

另外补充：React项目中尽量避免直接用jQuery操作DOM（比如$('.text')），更推荐使用React的状态和ref来操作元素，更符合React设计理念，也能减少依赖冲突问题。

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