Unable to access function bundled by WebPack

javascript module webpack

19,982

The ui object exported by the bundled library is the same as the exported object of the entrypoint module. If you do not explicitly export a function from a module in webpack, it will only be defined within that module's scope (which is one of the primary features of JavaScript modules). You need to assign it to the module.exports object to be able to access it from outside the module:

/** main.js **/

function helloWorld() {
    alert( 'Hello, world!' );
}

// module.exports here (in the entrypoint module) is the same object
// as ui in the page's scope (outside webpack)
module.exports = {
  helloWord: helloWorld,
};

Then you can access it from your other scripts:

<script>
  ui.helloWorld(); // 'ui.helloWorld' is the same as
                   // 'module.exports.helloWorld' above
</script>

If you don't explicitly set module.exports in the entrypoint module, it will default to an empty object { }.

19,982

Jean-François Côté

I'm a software engineer doing full stack web development but I tend to do more backend. These days I mainly code in Java (Android/Play Framework). I have a solid background in C++ and with C#/.NET from my previous assignments. I'm an Open Source Contributor to Swagger-Codegen, which is a free, open-source project to automatically generate API clients, server stubs and API documentation based on OpenAPI specifications. A good starting point is the eBook: A Beginner's Guide to Code Generation for REST APIs My professionnal website: http://www.jaffsoft.com My recipe blog (in french): http://recettesmaison.ca

Updated on July 07, 2022

Comments

Jean-François Côté almost 2 years

I have a very simple webapp where WebPack bundle the javascript into one bundle.js file that is used by various html page.

Unfortunately, even if I specify in the webpack config file that I want to use it as a standalone library (libraryTarget and library) that can be used by script tag, it doesn't work. Everything seems to be encapsulated in module so my functions are not available.

index.html

<!DOCTYPE html>
<html lang="EN">
<head>
    <title>Play! Webpack</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
    <body>
    <app>
        Loading...
    </app>
    <script type="text/javascript" src="/bundles/bundle.js" charset="utf-8"></script>
    <button type="button" onclick="ui.helloWorld()">Click Me!</button>
    </body>
</html>

entry and output section of my webpack.base.config.js

entry: [
        './app/main.js'
    ],
    output: {
        path: buildPath,
        filename: 'bundle.js',
        sourceMapFilename: "bundle.map",
        publicPath: '/bundles/',
        libraryTarget: 'var',
        library: 'ui'
    },

main.js (entry point)

function helloWorld() {
    alert( 'Hello, world!' );
}

When clicking on my button, I receive this error in the console:

Uncaught TypeError: ui.helloWorld is not a function
    at HTMLButtonElement.onclick (localhost/:14)

For additionnal info, the content of my bundle.js file looks something like that:

var ui = ...

(stuff here)

function(module, exports, __webpack_require__) {

    __webpack_require__(79);

    function helloWorld() {
        alert('Hello, world!');
    }

/***/ }

Andrej K over 6 years

Even though this fixes the issue, when dealing with large library of functions (possibly maintained by someone else) you wouldn't want to do this manually (inside the source file). Any better way to export all?
Frxstrem over 6 years

@JoshuaSmith If that is the case, you could just define all of your functions as module.exports.helloWorld = function helloWorld() { ... }. As far as I'm aware, there's no way to export all functions, so that's probably the closest you'll get.
Jonny almost 4 years

@frxstrem - I have followed your steps, works very well thank you. But I can only access one export using that method. Let's say I have two modules, each module exporting a function, when I follow the steps above how would I access both functions? I don't fully understand your previous comment...