'Uncaught ReferenceError: jQuery is not defined' with create-react-app

'Uncaught ReferenceError: jQuery is not defined' with create-react-app

正在使用 create-react-app 构建 React 应用程序,因此该应用程序已准备好服务器。

导入 bootstrap javascript 插件(例如 'affix.js' 时,出现错误 'Uncaught ReferenceError: jQuery is not defined',页面不再加载。

我正在通过 index.js 文件导入所有模块,因为使用 create-react-app 它似乎从 [=49= 加载 'src' 和 'link' 导入] 文件。

正在导入 bootstrap 插件,如下所示: 导入 'bootstrap/js/affix.js'

已尝试通过以下方式在 index.js 文件的顶部导入 jquery,但 none 正在运行:

  1. 从 'jquery'
  2. 导入 jquery
  3. 从 'jquery'、window 导入 jquery。$ = window.jQuery = jquery;
  4. 从 'jquery'
  5. 导入 jQuery
  6. 从 'jquery'
  7. 导入 $
  8. 进口'jquery/dist/jquery.js';
  9. require('./node_modules/jquery/dist/jquery.js')

有什么想法吗?

在这里创建 React App 维护者。

import $ from 'jquery';

然后使用

$.something()

如果您使用 jQuery 2.x 或更高.

,应该可以正常工作

如果不是,请提出问题。


在您的示例中,问题可能是您写了 import jquery from 'jquery' 但使用 jQuery 作为变量名。您应该写 import jQuery from 'jquery'(或任何其他名称,只要您始终使用它)。 JavaScript 中的变量名称区分大小写。

万一有人降落在这里。我用这个解决了 'create-react-app' 的类似问题:

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

并且为了导入其他需要 jQuery 的包,您应该在此之后导入这些包,在 affix.js 的情况下,

require 'bootstrap/js/affix.js';

您可以在 React "public" 文件夹中复制 jquery.js 文件并将其导入您的 index.html 文件

通过编辑解决了 index.html

尝试在 InnerHTML 组件中使用 jQuery 时遇到类似问题。解决问题的方法是将其源代码导入 index.html:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>