Jquery plugins giving errors $(...).ionRangeSlider not a function

I am trying to use jquery plugins in my react application. Every time I try to use some jquery third party plugin, I get an error saying $(...).somePlugin not a function. Currently I am trying to use ionRangeSlider. It is giving me error

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>

As far as I have read on web, this is a multiple jquery clashes issue.

About my Application: My project has jquery installed via npm. So there is one jquery present in package.json. I have also included jquery in scripts in my index.jade file. So there is another one there.

This is not an issue of jquery placed after plugin's js file. I placed jquery at the top in the scripts of index.jade file.

block head_scripts

        script(src='https://code.jquery.com/jquery-3.2.1.min.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')

I also tried noConfilct. But that too didn't work.

var $ = jQuery.noConflict();

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

I tried including jquery in my webpack config.js file

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

Nothing from the above worked. Everytime I got the same error.

How can I solve this. If this bug persists then I won't be able to use any jquery plugin.

via ApurvG