【问题标题】：'Uncaught ReferenceError: jQuery is not defined' with create-react-app'Uncaught ReferenceError: jQuery is not defined' with create-react-app
【发布时间】：2017-06-07 14:17:10
【问题描述】：

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

在导入诸如“affix.js”之类的引导 javascript 插件时，我收到错误“未捕获的 ReferenceError: jQuery is not defined”，并且页面不再加载。

我正在通过 index.js 文件导入所有模块，因为使用 create-react-app 它似乎从 index.html 文件中加载了“src”和“link”导入。

我正在像这样导入引导插件：导入'bootstrap/js/affix.js'

已尝试在 index.js 文件的顶部通过以下方式导入 jquery，但均无效：

从“jquery”导入 jquery
从'jquery'导入jquery，window.$ = window.jQuery = jquery;
从“jquery”导入 jQuery
从“jquery”导入 $
导入'jquery/dist/jquery.js';
require('./node_modules/jquery/dist/jquery.js')

有什么想法吗？

【问题讨论】：

我认为，不要以这种方式导入jquery。只需将 cdn jquery 链接放在 html 文件中，它应该可以工作。使用这个：<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
@MayankShukla 感谢这工作！最后。我之前尝试了很多其他方法。我想这与 index.html 在 create-react-app 的一部分时扫描文件夹目录的方式有关。所以 CDN 在这种情况下可以工作。谢谢！您也可以将其发布为官方答案吗？您刚刚使用 expressJS 自下而上地重建了应用程序，因为我之前没有构建过 nodeJs 或 expressJs 应用程序，因此我将通过教程来完成这项工作 :) 您可能节省了我半天的时间。谢谢！
@MayankShukla 还有关于为什么我上面的导入方法不起作用的任何想法？
另外顺便说一句，您提供的 CDN 导致我的 URL 无效。改用code.jquery.com 提供的那些。
不，您不需要 CDN。不幸的是，您没有提供重现该问题的完整代码，所以我不能说到底出了什么问题。请看我的回答。

标签： jquery twitter-bootstrap reactjs create-react-app

【解决方案1】：

在这里创建 React App 维护者。

import $ from 'jquery';

然后使用

$.something()

应该可以正常工作如果您使用的是 jQuery 2.x 或更高版本。

如果没有，请提出问题。

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

【讨论】：

感谢您的回复。我已经尝试过“ import $ from 'jquery' ”，它给出了同样的错误。另外，关于您之前的评论，您可以在此处查看我目前通过 CDN (github.com/smaameri/keywords-finder) 导入 jquery 的源代码。要测试该错误，您可以从 index.html 中删除 CDN 链接，然后尝试在 App.js 中按上述方式导入 jquery。您将看到参考错误。也会像你说的那样提交问题。

【解决方案2】：

万一有人降落在这里。我已经通过使用这个解决了“create-react-app”的类似问题：

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

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

require 'bootstrap/js/affix.js';

【讨论】：

似乎不适用于我的 create-react-app。当我加载应用程序并在控制台类型 window.jQuery 中我得到未定义。
在我的 html 文件中使用 CDN 似乎是让 jQuery 加载到我的应用程序中的唯一方法。

【解决方案3】：

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

【讨论】：

难道没有更多的东西吗？

【解决方案4】：

通过编辑index.html解决了

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

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

【讨论】：