Expose Functions Using Webpack & Then Call Them From an Inline Script

Question

I'm working on getting a bunch of legacy inline scripts cleaned up.

My question is: How do I call a function from an inline script that is compiled in WebPack.

After trying a bunch of different things, I understand that I need to use 'expose-loader' to be able to reference the functions out of WebPack.
My eventual goal is to get rid of all of the inline scripts, but in the interim, I need a solution to prevent things from breaking when called from an inline script. (not ideal, but it's what I've got)

Currently, I get one of two errors:

Error 1:

"Uncaught TypeError: derpFunc is not a function"

Error 2:

Uncaught Error: [exposes-loader] The "derpFunc" value exists in the global scope, it may not be safe to overwrite it, use the "override" option

derpFunc.js

function derpFunc(){
    console.log('derp');
}
window.appCalendar  = appCalendar; // If I comment this out, I get Error #2
export { appCalendar }; // If I comment this out, I get Error #1

wepback.config.js

// Expose Legacy functions for use outside Webpack build
{
    test: require.resolve('./derpFunc.js'),
    use: [
        {
        loader: 'expose-loader',
        options: {
            exposes: [
                'derpFunc'
            ],
            override: true
        }
        }
    ]
},

In other words, my issue is: A) If I don't add my function to the global scope, then it does exist 2) If I do add it to the global scope, then I get a global scope error

score 0 · Answer 1 · answered Mar 18 '23 at 18:47

Well, in typical fashion, the solution presented itself a few minutes after posting here. ¯\_(ツ)_/¯

Wrapping my function in a namespace seems to be working.

derpFunc.js

const myNamespace = {
  derpFunc: function() {
    console.log('derp');
  }
};
window.myNamespace = myNamespace;
export { myNamespace };

inline script

myNamespace.derpFunc();

Expose Functions Using Webpack & Then Call Them From an Inline Script

1 Answers1