将 Colorbox 添加到我的 ReactJS 应用程序创建 "jQuery is not defined"

Question

我正在尝试添加 Colorbox library to my project created with create-react-app。我已经通过 npm 安装了 jquery-colorbox 包，并在我的一个 *.js 文件中添加了导入：

import $ from 'jquery'; // also tried: import jQuery from 'jquery';
import 'jquery-colorbox';

在那之后，我得到的只是一个错误：

ReferenceError: jQuery is not defined

 (anonymous function)
 node_modules/jquery-colorbox/jquery.colorbox.js:1105
  1102 | 
  1103 |    publicMethod.settings = defaults;
  1104 | 
> 1105 | }(jQuery, document, window));
  1106 | 
  1107 | 
  1108 |

有人对如何解决这个问题有任何建议吗？

另外，我想运行与 Colorbox 库的代码是这样的：

$(function() {
    $('.colorbox-group' + id).colorbox({
        rel: 'colorbox-group' + id,
        maxWidth: '95%',
        maxHeight: '95%'
    });
});

更新 #1

还...尝试使用 CDN 并将这些行添加到 index.html 文件：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.6.4/jquery.colorbox-min.js"></script>

和运行我的应用程序的一个 JS 文件中的代码：$.colorbox('something');。结果：

TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery___default.a.colorbox is not a function

Answer 1

看起来它正在使用变量 jQuery 而不是 $。我可能会尝试按名称导入 jQuery 对象，例如：

import {$, jQuery} from 'jquery';

或者只是：

import jQuery from 'jquery';

Answer 2

方案一：jquery & jquery-colorbox

使用 cdn

Here 是一个简单的 github 存储库，我使用 reactjs 制作的。希望对您有所帮助！

解决方案 2：为 jquery & jquery-colorbox

使用 npm 包

Here 是一个 github 存储库，使用带有 React 设置的 npm 包。我也遇到了与 'jQuery' undefined 相同的问题。解决方案是在 webpack 配置中为 jQuery 添加一个 webpack 插件。在你的 webpack-config 文件中添加：首先导入 webpack：

let webpack = require('webpack');

然后添加此代码：

plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
]

方案三：专门针对'create-react-app'

更新 app.js 文件中的导入，如下所示：

import jQuery from 'jquery';
window.jQuery = jQuery;
require('jquery-colorbox');

希望它能解决您的问题。

将 Colorbox 添加到我的 ReactJS 应用程序创建 "jQuery is not defined"

Adding Colorbox to my ReactJS application creates "jQuery is not defined"

javascript

jquery

reactjs

colorbox