How to consume an UMD module with webpack?

Question

In a trivial webpack 2 project, I'm trying to use this UMD module: https://github.com/Offirmo/simple-querystring-parser/blob/master/index.js

There is no transpilation error.

However, this ends up with this error in the browser:

Uncaught TypeError: Cannot set property 'SimpleQuerystringParser' of undefined

It seems webpack wrapping is providing an environment that the UMD snippet can't recognize.

• I coulndn't find any hint in webpack doc
• Searching google for "consuming UMD with webpack" didn't come up with interesting results
• StackOverflow wasn't helpful either.

So how can I consume my UMD library in webpack?

Note: yes, the target UMD library is mine, but it uses a legit UMD snippet from the official UMD website. Any suggestions are welcome.

Answer 1

In the end, I debbuged the UMD wrapper under webpack 2 environment and was able to come up with an improved UMD wrapper which also works in webpack 2: (available in a gist here https://gist.github.com/Offirmo/ec5c7ec9c44377c202f9f8abcacf1061#file-umd-js)

// Iterating on the UMD template from here:
// https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js
// But experimentally improving it so that it works for webpack 2

// UMD template from https://gist.github.com/Offirmo/ec5c7ec9c44377c202f9f8abcacf1061#file-umd-js
(function (root, factory) {
   var LIB_NAME = 'Foo'
 if (typeof define === 'function' && define.amd) {
  // AMD. Register as an anonymous module.
  define(function () {
   return (root
    ? root[LIB_NAME] = factory()
    : factory() // root is not defined in webpack 2, but this works
   )
  });
 } else if (typeof module === 'object' && module.exports) {
  // Node. Does not work with strict CommonJS, but
  // only CommonJS-like environments that support module.exports,
  // like Node.
  module.exports = factory()
 } else if (root) {
  // Browser globals
  root[LIB_NAME] = factory()
 } else {
  throw new Error('From UMD wrapper of lib "' + LIB_NAME + '": unexpected env, cannot expose my content!')
 }
}(this, function () {
 "use strict";
  
   return {
  ...
 }
}))

For information, the original wrapper, not working in webpack 2: (from here https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js)

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(function () {
            return (root.returnExportsGlobal = factory());
        });
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals
        root.returnExportsGlobal = factory();
    }
}(this, function () {
  "use strict";
  
   return {
  ...
 }
}))

Fortunately I was the owner of the lib and could fix it.