unable to initialise knob in an es6 module

Question

I'm trying to use jquery knob from within an ES6 module but having problems initializing within the module. At the moment I get an error of 'knob is not a function`

In my module I'm requiring the knob plugin like this:

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

The code I'm working on is trying to get a progress bar for a fileupload (using the blueimp plugin)

Here's the basics of my code (it's a bit messy at the moment and will refactor once I get it working):

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();
                    });

                });

There's a bit more to the class that I've removed for brevity.

I'm unable to set the knob plugin on either my test element or the created tpl element.

In the output from the console.log in the constructor I get this output:

init fileupload ƒ (options){

  options = extend({
    value: 50,

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

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

   …

Which appears to indicate the plugin is available.

But tpl.find('input').knob(); or $('#test').knob(); do not work - function not available.

How do I initiate the plugin - I assume it must be down to scope or the way the jquery object tpl is created but not sure how to resolve :(

Thank you