javascript - Jquery 插件给出错误 $(...).ionRangeSlider 不是函数

Question

我正在尝试在我的 React 应用程序中使用 jquery 插件。每次我尝试使用一些 jquery 第三方插件时，我都会收到一条错误消息，提示 $(...).somePlugin 不是函数。目前我正在尝试使用 ionRangeSlider。它给我错误

Uncaught TypeError: (0 , _jquery2.default)(...).ionRangeSlider is not a function

js文件

import $ from 'jquery'
import 'bootstrap-tagsinput'

class AddTagSection extends Component {


    componentDidMount=()=> {

        this.slider = $(this.inputSlider).ionRangeSlider();

    }

<div className="irs-wrapper">
                            <input type="text"  ref={node=>this.inputSlider=node} className='input-slider' id="ionSlider-newTag" name="ionSlider"/>
                        </div>

下面是在 ionRangeSlider.js(插件)中调用的函数

$.fn.ionRangeSlider = function (options) {
        return this.each(function() {
            if (!$.data(this, "ionRangeSlider")) {
                $.data(this, "ionRangeSlider", new IonRangeSlider(this, options, plugin_count++));
            }
        });
    };

据我在网上看到的，这是一个多个 jquery 冲突问题。

关于我的应用程序:我的项目通过 npm 安装了 jquery。所以 package.json 中存在一个 jquery。我还在 index.jade 文件的脚本中包含了 jquery。所以那里还有另一个。

这不是放置在插件的 js 文件之后的 jquery 的问题。我将 jquery 放在 index.jade 文件脚本的顶部。

block head_scripts

         script(src='https://code.jquery.com/jquery-3.2.1.min.js') 
    script(src='/public/ion.rangeSlider.js')
    link(href='/public/normalize.css' rel="stylesheet")
    link(href='/public/ion.rangeSlider.css' rel="stylesheet")
    link(href='/public/ion.rangeSlider.skinFlat.css' rel='stylesheet')

我也试过 noConfilct。但这也行不通。

var $ = jQuery.noConflict();

$( ".slider" ).ionRangeSlider();

我尝试在我的 webpack config.js 文件中包含 jquery

new webpack.ProvidePlugin({
            React: 'react',
            $: 'jquery',
            jQuery: 'jquery'
        }),

以上均无效。每次我遇到同样的错误。

我该如何解决这个问题？

Answer 1

如果您的项目包含的 jQuery 版本与 ionRangeSlider package.json 依赖项中指定的版本不同，并且您正在使用 yarn 来安装项目的依赖项和 webpack 来捆绑项目，那么这可能是问题的根源。 Yarn 甚至会在 ion-range-slider 文件夹中安装 node_modules，这将导致 webpack 构建使用您的 jQuery 以及 ion-range-slider/node_modules 中的项目。因此 jQuery 版本冲突。 ionRangeSlider 使用第一个 jQuery 启动，您项目的 jQuery 不会包含它。

这是 ionRangeSlider 开发人员的错误，因为他不应该在 dependencies 中指定 jQuery，而是在 peerDependencies.