Webpack 2 ES6 import UMD without default export

Question

I'm trying to import UMD libraries using Webpack 2 and ts-loader . It used to work using Webpack 1 and Rollup (without TypeScript), but Webpack 2 appends .default when invoking imported function.

For example:

import canvg from 'canvg';
canvg();

transforms into

var canvg_1 = require("canvg");
canvg_1.default();

and I get Uncaught TypeError: canvg_1.default is not a function .

How to fix it?

Answer 1

The problem was in TypeScript config, I've added a module: 'es2015' into my tsconfig.json and it worked. Also allowSyntheticDefaultImports: true may help in some cases (not necessary in my case, some analog for babel-plugin-add-module-exports described by @alejandro-garcia-anglada).

{
    "compilerOptions": {
        "module": "es2015",
        "allowSyntheticDefaultImports": true
    }
}

Answer 2

Using babel-plugin-add-module-exports you can make sure everything works as expected.

https://www.npmjs.com/package/babel-plugin-add-module-exports