Project won't compile after adding webworker to Angular 11

[ezforw]

🐞 bug report

Affected Package

The issue is caused by package @angular-devkit/build-angular/src/babel/webpack-loader.js

Is this a regression?

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

Description

Added web worker to an existing Angular 11 project, then the project won't compile anymore.

The error was gone when "webWorkerTsConfig": "tsconfig.worker.json" was removed from angular.json

🔬 Minimal Reproduction

1. Checkout https://github.com/ezforw/angular-11-webworker-sample
2. npm install
3. npm start

🔥 Exception or Error

Error: ./node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js
Module parse failed: Cannot read property 'length' of undefined
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js

🌍 Your Environment

Angular Version:

Angular CLI: 11.1.0
Node: 12.6.0
OS: darwin x64

Angular: 11.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1101.0
@angular-devkit/build-angular   0.1101.0
@angular-devkit/core            11.1.0
@angular-devkit/schematics      11.1.0
@schematics/angular             11.1.0
@schematics/update              0.1101.0
rxjs                            6.6.3
typescript                      4.1.3

[petebacondarwin]

I debugged this through to the point where it crashes. At this point it is trying to parse code in node_modules/@auth0/auth0-spa-js/dist/auth0-spa-js.production.esm.js. I changed the package.json of that package to point to a non-production file (that is not minified) and I can see that the code that is failing to be parsed is:

    function createBase64WorkerFactory(base64, sourcemapArg, enableUnicodeArg) {
        var url;
        return function WorkerFactory(options) {
            url = url || createURL(base64, sourcemapArg, enableUnicodeArg);
            return new Worker(url, options);  // <---- the parser expects `options` to be an object literal
        };
    }

I don't know if this is a problem with the code generated by auth0 or whether it is the parser library (which is node_modules/worker-plugin). Perhaps the latter if it was updated to a new version recently?

In any case, this does not appear to be an issue with the Angular framework. I am going to transfer this to the CLI project, which may be able to shed light on the worker-plugin dependency.

[alan-agius4]

As @petebacondarwin mentioned It does appear that this is a bug in the worker-plugin where it doesn't handle providing the options via a defined variable Identifier.

Unfortunately, this is not actionable from our end. Kindly file an issue https://github.com/GoogleChromeLabs/worker-plugin.

[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.}