Angular-cli: Unexpected reserved word 'arguments' when running translations --localize

[thduttonuk]

🐞 bug report

Is this a regression?

Yes, it worked in Angular 8

Description

Running ng build --prod --localize causes the error Unexpected reserved word 'arguments' but running ng build --prod builds fine. I have tracked this down to superagent that is referenced by Auth0. What I don't understand is why only --localize causes the build error. We are building and deploying the code using --prod builds, we are blocked on the --localize builds.

🔬 Minimal Reproduction

I have created a repo for reproduction
https://github.com/thduttonuk/angular9-issue1

Run
ng build --prod this builds fine
ng build --prod --localize causes Unexpected reserved word 'arguments'

🔥 Exception or Error

Localized bundle generation failed: angular9-issue1\main-es2015.acfa3bd7294e9b8980d0.js: Unexpected reserved word 'arguments' (1:481223)
An error occurred inlining file "main-es2015.acfa3bd7294e9b8980d0.js"

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.1
Node: 12.16.1
OS: win32 x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.1
@angular-devkit/build-angular     0.901.1
@angular-devkit/build-optimizer   0.901.1
@angular-devkit/build-webpack     0.901.1
@angular-devkit/core              9.1.1
@angular-devkit/schematics        9.1.1
@ngtools/webpack                  9.1.1
@schematics/angular               9.1.1
@schematics/update                0.901.1
rxjs                              6.5.5
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?
No

[thduttonuk]

I've tested this more and setting "optimization": false, in the angular.json config stops the error and it builds. Obviously we don't want to do this as a work around due to the size of the bundles.

[Mark-SofTools]

This is causing a real issue with new clients in Japan not being able to see correct versions.

Could someone give an estimate on time to fix please?

[petebacondarwin]

It seems that it is this function in auth0-js that is causing the error:

    ["use", "on", "once", "set", "query", "type", "accept", "auth", "withCredentials", "sortQuery", "retry", "ok", "redirects",
     "timeout", "buffer", "serialize", "parse", "ca", "key", "pfx", "cert"].forEach(function(fn) {
      /** Default setting for all requests from this agent */
      Agent.prototype[fn] = function(/*varargs*/) {
        this._defaults.push({fn:fn, arguments:arguments});
        return this;
      };
    });

[petebacondarwin]

I don't know why this is causing Babel to complain about the arguments variable, since it looks valid to me...

[thduttonuk]

@petebacondarwin The code in auth0 compiles fine when not using --localize its only an issue when adding this flag. So we can't generate the translated builds.

[petebacondarwin]

Yes, the localization of the code uses Babel - and it is the Babel parser that is complaining.
If you don't localize then this is not called. We need to find out why this is a problem for Babel. Perhaps we can set an option when parsing...

[petebacondarwin]

A workaround, if this function is not required, is to find this function in the auth0.min.esm.js file and delete it before running the localized build. 🤷

[thduttonuk]

Ah, ok. I didn't realize that localization code runs in Babel. It builds fine targeting es5 as another workaround. But I wanted to avoid this. Will try what you mentioned, but I'm sure the function will be required. Thanks :)

[fetis]

we have exactly the same issue but with the other auth0 library auth0-js. We currently use v9.13.2. Maybe something is broken in the Auth0 build process.

Let's invite @stevehobbsdev for conversation

[petebacondarwin]

Actually it appears that what Babel doesn't like is the {arguments} construct in the output from Terser:

["use","on","once","set","query","type","accept","auth","withCredentials","sortQuery","retry","ok","redirects","timeout","buffer","serialize","parse","ca","key","pfx","cert"].forEach((function(e){_.prototype[e]=function(){return this._defaults.push({fn:e,arguments}),this}}))

If we change this._defaults.push({fn:e,arguments}) to this._defaults.push({fn:e,arguments:arguments}) all is well.

[petebacondarwin]

Looks like this is a problem with Babel. This construct is valid in native ES2015 environments:

> function foo() {
... return {arguments};
... }
undefined
> foo(1, 2,3)
{ arguments: [Arguments] { '0': 1, '1': 2, '2': 3 } }

And there is already a bug reported in the Babel repo: https://github.com/babel/babel/issues/10411

[thduttonuk]

Actually it appears that what Babel doesn't like is the {arguments} construct in the output from Terser:

["use","on","once","set","query","type","accept","auth","withCredentials","sortQuery","retry","ok","redirects","timeout","buffer","serialize","parse","ca","key","pfx","cert"].forEach((function(e){_.prototype[e]=function(){return this._defaults.push({fn:e,arguments}),this}}))

If we change this._defaults.push({fn:e,arguments}) to this._defaults.push({fn:e,arguments:arguments}) all is well.

@petebacondarwin looks like this is in superagent, the newer version has changed. Is there a plan to update this package in the Auth0 lock?

[petebacondarwin]

@thduttonuk - Auth0 is not maintained by us :-)

[JLHwung]

The upstream Babel issue is fixed in 7.11.0.

[alan-agius4]

Closed via https://github.com/angular/angular-cli/pull/18413

[angular-automatic-lock-bot[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._}