Webpack externals module name with hyphen

Question

I am trying to load angular -ui-router into Webpack as an external dependency. The module name is "angular -ui-router". Here is an example:

module.exports = webpackMerge(commonConfig, { ... externals: { 'angular': true, 'angular-ui-router': true }, ... }); 

The problem is that Webpack creates a module in my app.bundle.js, which looks like this:

 /***/ }, /* 1 */ /***/ function(module, exports) { module.exports = angular; /***/ }, /* 2 */ /***/ function(module, exports) { module.exports = angular-ui-router; /***/ } /******/ ]); 

When the browser tries to load the module, it evaluates module.exports = angular-ui-router as an expression, causing the following error:

Uncaught ReferenceError: ui is not defined

The only fix I found for this problem:

 module.exports = webpackMerge(commonConfig, { ... externals: { 'angular': true, 'angular-ui-router': 'window["angular-ui-router"]' }, ... }); 

This gives the correct result.

Is there a better way?

Answer 1

If you have a hyphenated externals module name, use libraryTarget as umd in the output section. So the app.bundle code will have

 require("angular-ui-router") would be used for requireJS and root.angularUIRouter = factory(root["angular-ui-router"]) would be used for global variable type. 

The package code will look like this:

 "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("angular-ui-router")) : "function" == typeof define && define.amd ? define(["angular-ui-router"], factory) : "object" == typeof exports ? exports.temp = factory(require("angular-ui- router")) : root.temp = factory(root["angular-ui-router"])