How to correctly export a javascript module in Webpack project

Question

I am currently experiencing issues exporting a module in webpack. I have been able to export simple modules which contain functions like the following:

let getEle = function(item) {
    return document.getElementById(item);
};

module.exports = {
    getEle: getEle
};

And in my main.js I will import it like so:

import { getEle } from './helper.js';

This works without any issues. However, I was trying to export a custom datePicker that I found (namely FooPicker: https://github.com/yogasaikrishna/foopicker):

var FooPicker = (function () {
    // code
    function FooPicker() {
        // code
    }
    return FooPicker;
})();

// my attempt at exporting the entire FooPicker module

module.exports = {
    FooPicker: FooPicker
}

And I try to import it like so in my main.js:

import FooPicker from './fooPicker.js'

My attempt at using the module (this works as expected if I simply call the function in a demo HTML file):

let foopicker2 = new FooPicker({
  id: 'datepicker2'
});

However this does not work and I seeing the following error:

Uncaught TypeError: FooPicker is not a constructor

I have limited experience working with Webpack and I have done a fair bit of searching but I am still not able to find something relevant to my issue. What am I doing incorrectly here and what can I do to correct it?

Answer 1

Your case is with export

var FooPicker = (function () {
    // code
    function FooPicker() {
        // code
    }
    return FooPicker;
})();

var fooPicker = new FooPicker()
console.log(fooPicker)

Try:

module.exports = FooPicker

const FooPicker = require('./fooPicker.js')
var fooPicker = new FooPicker()

This will work