Syntax error in main.js bundle in IE11 with @angular-devkit/[email protected]

[snbfan]

🐞 bug report

Affected Package

@angular-devkit/[email protected]

Is this a regression?

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

Description

Recently we updated our project to Angular9.1.0.

On IE11 we observe a regression - there's a syntax error in the minified js code.
The issue is assumably caused by @angular-devkit/build-angular package .
With @angular-devkit/[email protected] we experience a syntax error in the final js bundle on IE11.
This doesn't happen with @angular-devkit/[email protected] .

🔬 Minimal Reproduction

https://stackblitz.com/...

🔥 Exception or Error

Issue 1 (js syntax error):
https://imgur.com/a/AvMfic4

Issue 2:
We looked into source of syntax error (Issue 1) (https://imgur.com/a/MtZ6E17) and then tried to simplify/reformat the code and build it, this is what we got:

ERROR in /code/packages/shared/src/lib/touchpoint/captcha/captcha.ts
Module parse failed: Cannot read property 'length' of undefined
File was processed with these loaders:
    * ../../node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js
* ../../node_modules/@ngtools/webpack/src/index.js
You may need an additional loader to handle the result of these loaders.
    TypeError: Cannot read property 'length' of undefined
at /code/node_modules/worker-plugin/src/index.js:58:46
at SyncBailHook.eval (eval at create (/code/node_modules/tapable/lib/HookCodeFactory.js:19:10), :7:16)
at SyncBailHook.lazyCompileHook (/code/node_modules/tapable/lib/Hook.js:154:20)
at Parser.walkNewExpression (/code/node_modules/webpack/lib/Parser.js:1822:25)
at Parser.walkExpression (/code/node_modules/webpack/lib/Parser.js:1613:10)
at Parser.walkVariableDeclaration (/code/node_modules/webpack/lib/Parser.js:1469:32)
at Parser.walkStatement (/code/node_modules/webpack/lib/Parser.js:997:10)
at Parser.walkStatements (/code/node_modules/webpack/lib/Parser.js:868:9)
at inBlockScope (/code/node_modules/webpack/lib/Parser.js:1017:9)
at Parser.inBlockScope (/code/node_modules/webpack/lib/Parser.js:2060:3)
at Parser.walkBlockStatement (/code/node_modules/webpack/lib/Parser.js:1014:8)
at Parser.walkStatement (/code/node_modules/webpack/lib/Parser.js:949:10)
at Parser.walkIfStatement (/code/node_modules/webpack/lib/Parser.js:1036:9)
at Parser.walkStatement (/code/node_modules/webpack/lib/Parser.js:979:10)
at Parser.walkStatements (/code/node_modules/webpack/lib/Parser.js:868:9)
at inBlockScope (/code/node_modules/webpack/lib/Parser.js:1017:9)
ERROR in main.9e361406b69b03d4b106.js from Terser
Expecting UnicodeEscapeSequence -- uXXXX or u{XXXX} [main.9e361406b69b03d4b106.js:58932,0]
at ee (/code/node_modules/terser/dist/bundle.min.js:1:19453)
at m (/code/node_modules/terser/dist/bundle.min.js:1:20766)
at i (/code/node_modules/terser/dist/bundle.min.js:1:24377)
at /code/node_modules/terser/dist/bundle.min.js:1:24599
at /code/node_modules/terser/dist/bundle.min.js:1:25319
at Object.L [as input] (/code/node_modules/terser/dist/bundle.min.js:1:26161)
at a (/code/node_modules/terser/dist/bundle.min.js:1:27688)
at s (/code/node_modules/terser/dist/bundle.min.js:1:27742)
at D (/code/node_modules/terser/dist/bundle.min.js:1:28542)
at /code/node_modules/terser/dist/bundle.min.js:1:32838
✔ ng build
error Command failed with exit code 1.

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.0
Node: 10.13.0
OS: darwin x64

Angular: 9.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.901.0
@angular-devkit/build-angular      0.900.3
@angular-devkit/build-ng-packagr   0.901.0
@angular-devkit/build-optimizer    0.900.3
@angular-devkit/build-webpack      0.900.3
@angular-devkit/core               9.1.0
@angular-devkit/schematics         9.1.0
@angular-devkit/schematics-cli     0.901.0
@angular/cdk                       9.2.0
@angular/flex-layout               9.0.0-beta.29
@angular/material                  9.2.0
@ngtools/webpack                   9.0.3
@nguniversal/common                9.0.0
@nguniversal/express-engine        9.0.0
@schematics/angular                9.1.0
@schematics/schematics             0.901.0
@schematics/update                 0.901.0
ng-packagr                         9.0.1
rxjs                               6.5.4
typescript                         3.7.5
webpack                            4.41.2

Anything else relevant?

IE version 11.0.9600.19180.

Windows 7

[JoostK]

Tranferred to CLI repo for more accurate triaging.

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro 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.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[snbfan]

Hello @alan-agius4 ,

Here is the repro repo: https://github.com/snbfan/ie-syntax-error-build-repro-17373 .

Project in the repo is built with NG cli 9.1.0.
Specific version of @angular-devkit/build-angular: 0.901.0.
In the main.js bundle you can search for const hashcashWorker = new Worker(__webpack__worker__0, ); - this line triggers a syntax error in IE11 in our app.

When I rebuilt the app with @angular-devkit/[email protected], the line in main.js is looking different: const hashcashWorker = new Worker(__webpack__worker__0, {});

I believe this build result difference is causing the error n IE11.

[alan-agius4]

Closed via #17607

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}