Skip to content

Instantly share code, notes, and snippets.

@rshaker
Last active September 7, 2023 18:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rshaker/c75185ea79c29c65be3d6e59f88e9bc4 to your computer and use it in GitHub Desktop.
Save rshaker/c75185ea79c29c65be3d6e59f88e9bc4 to your computer and use it in GitHub Desktop.
WEBPACK_IMPORTED_MODULE_2__ is not a constructor

WEBPACK_IMPORTED_MODULE_2__ is not a constructor

An error encountered while trying to instantiate a class from the node package I'm builiding, blockly_multiselect_plugin.

Bundling a node project for distribution as a library should be the same as bundling an application. One exception is that you need to expose exports from the package's entry point using Webpack's output.library option.

When targeting a library, especially when libraryTarget is 'umd', the globalObject option indicates what global object will be used to mount the library. To make UMD build available on both browsers and Node.js, set output.globalObject option to 'this'. The globalObject option defaults to 'self' for Web-like targets.

The following fragment of webpack.config.js shows how to correctly export the entry point for consumption by other packages.

module.exports = [
    {   name: 'index',
        context: path.resolve(__dirname, 'src'),
        mode: 'development',
        entry: ['./index.ts'],
        output: {
            filename: 'index.js',
            path: path.resolve(__dirname, 'dist'),
            globalObject: 'this',
            library: 'multiPlugin',
            libraryTarget: 'umd',
        },
    },
    // ...
]

Browser console errors:

08:34:04.306 polyfills.f20256041dc094b1af5e.js:13 Uncaught TypeError: blockly_multiselect_plugin__WEBPACK_IMPORTED_MODULE_2__.MultiSelect is not a constructor
    at initMultiselectPlugin (contentScriptMain.ts:49:1)
    at initPlugins (contentScriptMain.ts:51:6)
    at s.<computed> (polyfills.f20256041dc094b1af5e.js:72:439)
    at l.invokeTask (polyfills.f20256041dc094b1af5e.js:13:7018)
    at i.runTask (polyfills.f20256041dc094b1af5e.js:13:2427)
    at invokeTask (polyfills.f20256041dc094b1af5e.js:13:8068)
    at invoke (polyfills.f20256041dc094b1af5e.js:13:7970)
    at n.args.<computed> (polyfills.f20256041dc094b1af5e.js:72:152)

Reference:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment