Unmentioned breaking change in 47 due to module es2015

[ataraxus]

Short description of the problem:

I have a bigger codebase which i migrated from beta.11 till rc4 nightly. after recent upgrade of app-scripts my app was crashing during startup:

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 Object.<anonymous> (http://localhost:8100/build/main.js:93699:67)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:52570:73)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:93461:75)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
    at Object.<anonymous> (http://localhost:8100/build/main.js:82203:73)
    at __webpack_require__ (http://localhost:8100/build/main.js:20:30)

somehow i managed to notice what was causing this issue, since the codebase was working before the update. The change which broke my codebase is the following line in tsconfig.json:

"module": "es2015",

it was commonjs before i migrated. This change was introduced earlier.
but until .47 there was indication to change that line.

It is triggered when using TS Namespaces and only if you have a bigger code base (for whatever reason). See this example project

If you change "module": "es2015", to commonjs the app starts as expected. Also the app starts as expected if you remove the importing line in home.ts or and thats strange, delete any other model from models.

It seems to be an issue with webpack? But i don't know webpack well so i cant tell exactly whats going on.

What behavior are you expecting?

I expect this example project to work with the recommended setting "module": "es2015", or the recommendation to be changed to commonjs.

Steps to reproduce:

1. check out project
2. run npm install
3. run ionic serve

https://github.com/ataraxus/issue-es2015

Which @ionic/app-scripts version are you using?

Your system information:

 ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.9
Ionic App Scripts Version: 1.0.0
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v6.9.1
Xcode version: Not installed

[danbucholtz]

Hi @ataraxus,

Thanks for the detailed research and information. We've had module set to es2015 for a long time now, well before version 0.0.47. I'm not sure what the issue is, but the best approach will be to fix it while keeping the module as es2015. Please keep plugging away and let me know what you find.

Thanks,
Dan

[ataraxus]

Hey Dan,

thanks for the quick reply. I'm well aware that this change was "long" ago but since for me it just was visible after you released 47 since this was the moment i saw it in the migrationguide. Maybe there are some apps out there which also still have commonjs in it.

I could just stop using the namespace within my app to circumvent this issue. but i think this is not the solution which would be preferable. The code itself with the including namespace is generated by swagger and should be compliant with a lot of apps out there. I put some effort into the vanilla repo which reproduces the error, please take the time and have a look onto it, i'm out of ideas.

Cheers

should the generated code be the issue, I contributed to this part of swagger and would be able to adjust it. but i dont think this is the cause.

[ataraxus]

@danbucholtz

I now have located the issue at least somewhat. Webpacks Treeshaking is apparently breaking my app! Was there a significant upgrade of webpack or some configuration of it, between 0.0.46 and 0.0.47? since starting with this version it broke.

What is happening is that webpack decides during treeshaking that it could omit some code which is needed during runtime. This only happens if:

• you have an aggregating export file like i do:

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 all other exports seem to be fine

Workarounds:

• 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';

This is what i do now since i don't trust Webpack anymore.

I found this by examining the code webpack omits, which is nicely to say a PITA.

[ataraxus]

This was acutally a known BUG in webpack:
webpack/webpack#3895 (comment)

This should be fixed in theit master branch.

@danbucholtz could you show me where to configure the webpack dep, so i can test their fix be changing the dep?

[danbucholtz]

Webpack is a dependency of @ionic/app-scripts. If you want to test the master branch, the best bet is to pull down the @ionic/app-scripts repo, and modify the webpack dependency there.

The Webpack version did change. It went from a beta version, to their third RC release.

Thanks,
Dan