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

Question

正在使用 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 正在运行：

从 'jquery'
从 'jquery'、window 导入 jquery。$ = window.jQuery = jquery;
从 'jquery'
从 'jquery'
进口'jquery/dist/jquery.js';
require('./node_modules/jquery/dist/jquery.js')

有什么想法吗？

Answer 1

在这里创建 React App 维护者。

import $ from 'jquery';

然后使用

$.something()

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

，应该可以正常工作
如果不是，请提出问题。

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

Answer 2

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

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

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

require 'bootstrap/js/affix.js';

Answer 3

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

Answer 4

通过编辑解决了 index.html

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

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

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

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

jquery

twitter-bootstrap

reactjs

create-react-app

通过编辑解决了 index.html