Cli 8.3.0 ES5 build browser errors (Unable to get property 'enumerable' of undefined or null)

[dottodot]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [X] build
- [ ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

In version 8.2.2 I have no issues

Description

After updating to cli 8.3.0 I suddenly noticed a load of different errors for browsers using the es5 versions such as

Uncaught (in promise): TypeError: Object prototype may only be an Object or null.
Object prototype may only be an Object or null.
Uncaught (in promise): TypeError: Unable to get property 'enumerable' of undefined or null reference

These errors seem to be occuring when loading lazy modules via the router, and the module will not load, but not all modules have an issue.

🔬 Minimal Reproduction

So far I've not been able to find the cause, the project it's happening on is pretty big so could take an age to narrow it down, all I know so far is everything works without issue when using 8.2.2.

🌍 Your Environment

Angular CLI: 8.3.0
Node: 10.16.0
OS: darwin x64
Angular: 8.2.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.802.2
@angular-devkit/build-angular              0.802.2
@angular-devkit/build-optimizer            0.802.2
@angular-devkit/build-webpack              0.802.2
@angular-devkit/core                       8.3.0
@angular-devkit/schematics                 8.3.0
@angular/cdk                               8.1.3
@angular/cli                               8.3.0
@angular/flex-layout                       8.0.0-beta.26
@angular/material                          8.1.3
@angular/material-moment-adapter           8.1.3
@angular/pwa                               0.801.3
@ngtools/webpack                           8.2.2
@nguniversal/common                        8.1.1
@nguniversal/express-engine                8.1.1
@nguniversal/module-map-ngfactory-loader   8.1.1
@schematics/angular                        8.1.3
@schematics/update                         0.803.0
rxjs                                       6.5.2
typescript                                 3.5.3
webpack                                    4.38.0

Anything else relevant?

[dottodot]

Not sure if it will help but these are the build files for es5 polyfills from both versions
8.2.2
https://gist.github.com/dottodot/cf94e5ad7aeb5fa9bb46a8784bc9778b
8.30
https://gist.github.com/dottodot/350cae78efc360cab09e2a2d65e5685d

[clydin]

This appears to be a bug but we will need to look at a reproduction to find and fix the problem. Can you setup a minimal reproduction please?

You can read here why this is needed. A good way to make a minimal reproduction is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

[dottodot]

@clydin I am try to put together a reproduction, but it's not proving to be easy. I have found that if I turn off optimization on the build I don't get the errors, so look like something is getting messed up during that process.

[dottodot]

@clydin I've updated the gists of the polyfills generated by each so that they are not optimized and there are no similarities between the 2 so there seems to have been a major change to how the polyfills are created.

8.2.2
https://gist.github.com/dottodot/cf94e5ad7aeb5fa9bb46a8784bc9778b
8.30
https://gist.github.com/dottodot/350cae78efc360cab09e2a2d65e5685d

[mpalourdio]

I have the same problem from 8.3.0. I don't know if this is relevant, but with v8.2, ng build --prod had this output on one of my projects :

$ ng build --prod

chunk {0} runtime-es2015.763595a658e3d915739d.js (runtime) 2.22 kB [entry] [rendered]
chunk {1} main-es2015.e3c08efc69d7e6b64c3f.js (main) 342 kB [initial] [rendered]
chunk {2} polyfills-es2015.5cb1e996b2a376ba4548.js (polyfills) 36.4 kB [initial] [rendered]
chunk {3} styles.260db7471b6b212d15fd.css (styles) 170 kB [initial] [rendered]
chunk {4} 4-es2015.048f9a64090cab8e98f7.js () 65.6 kB  [rendered]
chunk {5} 5-es2015.f075b92034ea071d2587.js () 10.4 kB  [rendered]
chunk {scripts} scripts.8101eab34ab8ceec5c05.js (scripts) 2.38 kB [entry] [rendered]
Date: 2019-08-23T09:31:16.652Z - Hash: 33fb6c4dbc6be9e03248 - Time: 41757ms

chunk {0} runtime-es5.e9dbe24425ac2594dc02.js (runtime) 2.22 kB [entry] [rendered]
chunk {1} main-es5.185af62d087b4cf3e617.js (main) 385 kB [initial] [rendered]
chunk {2} polyfills-es5.082c2604bbe32d09561f.js (polyfills) 118 kB [initial] [rendered]
chunk {3} 3-es5.9a0287347fc12637f12f.js () 78.5 kB  [rendered]
chunk {4} 4-es5.50989bbe4d9b595a26d6.js () 10.5 kB  [rendered]
chunk {scripts} scripts.8101eab34ab8ceec5c05.js (scripts) 2.38 kB [entry] [rendered]
Date: 2019-08-23T09:31:53.474Z - Hash: bb637c1926545f66aff8 - Time: 36719ms

Now, it's just :

$ ng build --prod

chunk {0} runtime-es2015.5347e435a5d46e675e0c.js (runtime) 4.24 kB [entry] [rendered]
chunk {1} main-es2015.b5f190e2953aaddb7646.js (main) 548 kB [initial] [rendered]
chunk {2} polyfills-es2015.616846cf0280d444086b.js (polyfills) 64.3 kB [initial] [rendered]
chunk {3} polyfills-es5-es2015.1fbf71c2275b42103e11.js (polyfills-es5) 211 kB [initial] [rendered]
chunk {4} styles.260db7471b6b212d15fd.css (styles) 170 kB [initial] [rendered]
chunk {5} 5-es2015.c58944658cbd734e2e82.js () 87.5 kB  [rendered]
chunk {6} 6-es2015.3394c5ab5d2af60ed413.js () 11.4 kB  [rendered]
chunk {scripts} scripts.8101eab34ab8ceec5c05.js (scripts) 2.8 kB [entry] [rendered]
Date: 2019-08-23T04:29:11.236Z - Hash: 06bcc42a7e96f19e7357 - Time: 59384ms
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

[alexbjorlig]

Our team is unfortunately also experiencing this problem with the CLI in version 8.3.0. Forced to downgrade today 😢 Our app is also using lazy loading extensively. I did the following findings:

• If I serve locally, with no optimizations, it works like a charm in IE11
• When serving with optimizations I get the error: Uncaught (in promise): TypeError: Unable to get property 'enumerable' of undefined or null reference. TypeError: Unable to get property 'enumerable' of undefined or null reference. I also get the reference to the bundle where the error is thrown, but I don't know how to continue with that information 🤷🏽‍♂️

If I somehow can help fix this issue, let me know.

[mpalourdio]

Uncaught (in promise): TypeError: Unable to get property 'enumerable' of undefined or null reference. TypeError: Unable to get property 'enumerable' of undefined or null reference.

Exactly same error for me in IE11. Also affects an application with lazy loading, but I don't know if this is relevant.

[alan-agius4]

@dottodot and @mpalourdio the changes that you are seeing in the polyfills and console respectively are expected, this is because in 8.3 we no longer generate the ES5 bundles using a separate Webpack build. But rather we use babel to downlevel the ES2015 code to ES5.

As @clydin mentioned, it would be useful and helpful for us to track down the problem if someone puts together a minimal reproduction.