невозможно инициализировать ручку в модуле es6

Question

Я пытаюсь использовать jquery knob из модуля ES6, но возникают проблемы с инициализацией внутри модуля. В настоящее время я получаю сообщение об ошибке: «ручка не является функцией»

В моем модуле мне требуется плагин для ручки, например:

let knob = require('knob'); //name from package.json

Код, над которым я работаю пытается получить индикатор выполнения для загрузки файла (с помощью плагина blueimp)

Вот основы моего кода (в данный момент он немного запутан и будет реорганизован, как только я его заработаю):

export const uploadHandler = class {

   constructor() {
        this.initControls();
        this.initFileupload();
        console.log('init fileupload', knob);
    }
    initFileupload = () =>{
        // Initialize the jQuery File Upload plugin
        $('#upload').fileupload({
            url: 'filemanager/upload',
            dataType: 'json',
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .bar').css(
                    'width',
                    progress + '%'
                );
            },
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<p></p>').text(file.name).appendTo(document.body);
                });
            },

            // This element will accept file drag/drop uploading
            //dropZone: $('#drop'),

            // This function is called when a file is added to the queue;
            // either via the browse button, or via drag/drop:
            add: (e, data) => {
                $('#test').knob();

                let tpl = $('<li class="working row">' +
                    '<div class="col-sm-2">' +
                    '<input class="knob-control" type="hidden" value="0" data-width="48" data-height="48" data-fgColor="#0788a5" data-readOnly="1" data-bgColor="#3e4043" />' +
                    '<img src="/img/sample_content/upload-50x50.png">' +
                    '</div>' +
                    '<div class="col-sm-3 file-attribute">' +
                    '<p></p>' +
                    '</div>' +
                    '<div class="col-sm-2 file-attribute"></div>' +
                    '<div class="col-sm-2 file-attribute"><span></span></div>' +
                    '</li>');

                // Append the file name and file size
                tpl.find('p').text(data.files[0].name)
                    .append('<i> ' + formatFileSize(data.files[0].size) + '</i>');

                // Add the HTML to the UL element
                data.context = tpl.appendTo(this.ul);

                // Initialize the knob plugin
                tpl.find('input').knob();

                // Listen for clicks on the cancel icon
                tpl.find('span').click(function () {

                    if (tpl.hasClass('working')) {
                        jqXHR.abort();
                    }

                    tpl.fadeOut(function () {
                        tpl.remove();
                    });

                });

Для краткости я немного больше исключил класс.

Я не могу установить плагин knob для моего тестового элемента или для созданного элемента tpl.

В выводе console.log в конструкторе я получаю следующий вывод:

init fileupload ƒ (options){

  options = extend({
    value: 50,

    min: 0,
    max: 100,
    step: 1,

    cursor: false,
    thickness: 0.35,
    lineCap: 'butt',
    readOnly: false,
    displayInput: true,

   …

, который указывает, что плагин доступен.

Но tpl.find('input').knob(); или $('#test').knob(); не работают - функция недоступна.

Как запустить плагин - я предполагаю, что он должен находиться в области видимости или способе создания jquery объекта tpl, но не уверен, как решить : (

Спасибо