Question

我正在尝试在我的反应应用程序中使用jquery插件。每次我尝试使用一些jquery第三方插件时，我都会收到一个错误，说$（...）。somePlugin不是一个函数。目前我正在尝试使用ionRangeSlider。它给了我错误

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

js file

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来安装项目的依赖项和{{ 1}}捆绑项目，那么这可能是问题的根源。 webpack即使在Yarn文件夹中也会安装node_modules，这将导致ion-range-slider将使用您的webpack以及其中的jQuery来构建项目ion-range-slider/node_modules。因此jQuery版本发生冲突。 ionRangeSlider使用第一个jQuery启动，而您的项目jQuery将不包含该内容。

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

Answer 2

尝试将内部网址更改为rangelider的外部网址

<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>

<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css" />

然后从'react-rangeslider'导入Slider，如果没有使用es6转换器，那么执行var Slider = require（'react-rangeslider'）

Answer 3

我也有这个错误，看起来像是 Jquery 版本冲突，请尝试降级 package.json 中的 ion-rangeslider "ion-rangeslider": "2.2.0"。

Jquery插件给出错误$（...）。ionRangeSlider不是一个函数

3 个答案: