Treeshaking breaks Typescript namespace imports/exports

[ataraxus]

Do you want to request a feature or report a bug?
bug

What is the current behavior?

---

Disclaimer my project is an ionic project. i provide a gist which reproduces the error, but needs ionic to be installed. This project also contains 2 files:

• mainbroken.txt
• mainworking.txt

which is the output of webpack. These files can easily be diffed to see where the error occurs.
Ionic uses version: 2.2.0-rc.3 of Webpack

---

Webpacks Treeshaking is apparently breaking my app. This app builds on Typescript and does use Typescripts namespaces, which seem to be the problem.
What is happening is that webpack decides during treeshaking (?) that it could omit some code which is needed during runtime:

Uncaught TypeError: Cannot convert undefined or null to object
    at hasOwnProperty (<anonymous>)
    at Function.__webpack_require__.o (http://localhost:8100/build/main.js:60:103)
    at eval (\C:\Users\atx\git\mobile\projects\issue-es2015\src\models\models.ts:4:67)
    at Object.<anonymous> (http://localhost:8100/build/main.js:3940:1)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at eval (\C:\Users\atx\git\mobile\projects\issue-es2015\src\pages\home\home.ts:3:73)
    at Object.<anonymous> (http://localhost:8100/build/main.js:2046:1)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at eval (\C:\Users\atx\git\mobile\projects\issue-es2015\src\app\app.component.ts:4:75)
    at Object.<anonymous> (http://localhost:8100/build/main.js:3873:1)

/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

This only happens if:

• you have an aggregating export file like i do (./src/models/models.ts):

export * from './A';
export * from './B';
export * from './C';
...

this is generated by swagger and allows "easy imports" like

import { A, B, C } from './models';

• this aggregating export file must exceed a specific size, i my case its 12 wildcard exports, only after this exceeds, Webpack starts shaking "strong enough" to break things
• this aggregating export file must use the wildcard export * from
• you have to use Typescript namespaces (like in ./src/pages/home/home.ts) all other exports seem to be fine

Workarounds:

• one can use commonjs as module target in the ./tsconfig.json. this stops the error from occuring. this setting is not recommended by ionic.
• one can make the the exports in the aggregating file explicit:

export { A } from './A';
export { B } from './B';
export { C } from './C';

Which doesnt work for me, since its generated code

• one can stop using the aggregating file and do the imports explicitly so instead:

import { A, B, C } from './models';

do:

import { A } from './A';
import { B } from './B
import { C } from './C';

If the current behavior is a bug, please provide the steps to reproduce.

git clone https://github.com/ataraxus/issue-es2015
cd issue-es2015
npm install ionic@latest
npm install
ionic serve

a browser will open and display the error.
have a look in ./src/models/models.ts for "workarounds" of this issue

What is the expected behavior?
Basically this should "just work" or at least at runtime there should no null dereferencing or during build there should be a warning or error.

Please mention other relevant information such as the browser version, Node.js version, Operating System and programming language.

Your system information:

Node Version: v6.9.1
Typescript: 2.0.9
Firefox: 50.1.0
Chrome: 55.0.2883.87 m
Webpack: 2.2.0-rc.3
Cordova CLI: 6.4.0
Ionic CLI Version: 2.1.18
OS: Windows 7 - Ubuntu 16.04

[sokra]

already fixed in master branch