CODEWITHSUNDEEP
javascriptwebpackecmascript-6
Ian
Ian

Reputation: 3676

Using a jquery plugin with es6 import

I am trying to import rangeslider into an es6 class using import, however it always returns rangeslider is not a function

import * as rangeslider from 'rangeslider.js';

export class Layout {

    testFunc() {
        $(".rangepicker").rangeslider({
            onSlide: function(position, value)
            {
                $(this).parent().find(".rangepicker-output").html(value + 'px');
            }
        });
    }
}

Upvotes: 1

Views: 3046

Answers (2)

Estus Flask
Estus Flask

Reputation: 222474

It doesn't make sense to import exported value from jQuery plugins because they conventionally export jQuery instance.

The fact that imported rangeslider isn't used in code eliminates it from transpiled code, the package is not imported at all.

It should be

import 'rangeslider.js';

Upvotes: 2

sinbar
sinbar

Reputation: 1063

The below is rangeslider.js's source code, that do not offer es6 modular support. It support AMD and CommonJs,but not es6.

function(factory) {
'use strict';

if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
} else if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('jquery'));
} else {
    // Browser globals
    factory(jQuery);
}

The es6 modular is like:

export default function foo() {
  console.log('foo');
}

Upvotes: 3

Related Questions