Exporting and bundling a function using webpack and calling it inside html script tag

Question

I have been trying something very simple - export and bundle (and babel transpiling) a function using webpack and then call it in my html page's script tag.

sample.js - which is bundled using webpack

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

Webpack config (version = 4.44.1)

module.exports = (env, arguments) => {
    entry: {
            main: ['./assets/js/sample.js', './assets/css/main.scss'],
            entry2: ['./assets/js/entry2.js', './assets/css/entry2.scss']
    },
    output: {
        path: path.join(__dirname, '../public/js'),
        filename: '[name].js',
        library: 'MyLibrary',
        libraryTarget: 'var',

        // some additional configs/options that I have tried          
        // libraryTarget: 'window', // tried with this option, it does not work
        // libraryTarget: 'umd',  // tried with this option, it does not work
        // libraryExport: 'default', // tried with this option, it does not work
    }

I though it was as easy as adding the library and libraryTarget targets to webpack config and then I should be able to call my function as MyLibrary.sampleFunctionExported1().

But when I do MyLibrary in my browser console, it displays as below and MyLibrary.sampleFunctionExported1() return ... is not a function error

I have followed suggestions in many of these questions/answers: answer 1, answer 2, answer 3 and various other blog posts but it does not work for me at all.

So after spending so much time, I am posting it here hoping that someone can help me understand what is wrong.

Edit 1: Here is ithe file generated after webpack bundling: /public/js/sample.js

P.S. - Ignore the entry2.js file as it's an empty file, I just added it to show my config and because I am not sure if having multiple entry points can cause this issue which I am facing currently.

Is `MyLibrary.default` present? I'd think `MyLibrary.sampleFunctionExported1` would only be there if you did it as a named export instead of a default export. — Jacob, Dec 14 '20 at 18:56
can you share your transpiled `../public/js/sample.js` here or as a gist? might help the diagnosis. FWIW, in the past, I often target umd, and they ... seem to work ... after some tweaking. — pandamakes, Dec 14 '20 at 19:03
@Jacob - Actually I noticed that MyLibrary is not an empty object and it has `default` present in it but my function call still returns undefined error (I have updated my question with MyLibrary object pic) — Abubakkar, Dec 14 '20 at 19:25
pasted the code in browser, and it seem `MyLibrary.default()` calls the function you wanted. which... makes sense, since it's the default export... — pandamakes, Dec 14 '20 at 19:31
perhaps remove the default keyword if you want to use named function? , ie `MyLibrary.sampleFunctionExported1()` — pandamakes, Dec 14 '20 at 19:32

score 1 · Answer 1 · answered Dec 14 '20 at 20:21

Because of how you're exporting:

export default function sampleFunctionExported1(){
    console.log("sampleFunctionExported1");
}

...your MyLibrary variable is going to have the shape:

{
  default: function() { ... }
}

If you instead want it to have the shape:

{
  sampleFunctionExported1: function() { ... }
}

...you need to do a named export instead of a default export:

export function sampleFunctionExported1() {
  console.log("sampleFunctionExported1");
}

Exporting and bundling a function using webpack and calling it inside html script tag

1 Answers1