1.5.0 : let is a reserved identifier in FF logs

[rbleuse]

Bug Report or Feature Request (mark with an x)

- [ x ] bug report -> please search issues before submitting
- [ ] feature request

Repro steps.

I upgraded my ng project from ng-cli 1.4.9 to 1.5.0 and get the following error message in (at least this version) firefox 36 and dev environement, running ng serve :
SyntaxError: let is a reserved identifier vendor.bundle.js:24:0
This results in a blank page

Switching back to 1.4.9 works fine.
This error seems to happen with webpack as there is no error when testing in other environment than dev

The log given by the failure.

SyntaxError: let is a reserved identifier vendor.bundle.js:24:0

Mention any other details that might be useful.

The last working version is 1.5.0-rc.2.
With the rc3 upgrade, the error happens.

Here is --version using rc3 :

Angular CLI: 1.5.0-rc.3
Node: 6.11.3
OS: win32 x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0-rc.3
@angular/flex-layout: 2.0.0-beta.9
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0-rc.3
@schematics/angular: 0.0.49
typescript: 2.4.2
webpack: 3.8.1

Here is --version using rc2 :

Angular CLI: 1.5.0-rc.2
Node: 6.11.3
OS: win32 x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0-rc.2
@angular/flex-layout: 2.0.0-beta.9
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0-rc.2
@schematics/angular: 0.0.49
typescript: 2.4.2
webpack: 3.7.1

[filipesilva]

That seems to indicate one of you vendor libraries is using es2015 code. Can you try to identify which library that is, or offer a repro so we can investigate please?

[maturecheese]

Exact same problem on a new blank project
ng new testFirefox
cd testFirefox
ng serve

using angular-cli 1.6.0
SyntaxError: let is a reserved identifier vendor.bundle.js:24:0

tried downgrade to 1.5.0-rc.2 ... I'm now getting in console
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create vendor.bundle 39
TypeError: Object.assign is not a function vendor.bundle 3136

Angular CLI: 1.5.0-rc.2
Node: 6.11.1
OS: darwin x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

angular/cli: 1.5.0-rc.2
angular-devkit/build-optimizer: 0.0.35
angular-devkit/core: 0.0.22
angular-devkit/schematics: 0.0.41
ngtools/json-schema: 1.1.0
ngtools/webpack: 1.8.0-rc.2
schematics/angular: 0.0.49
schematics/schematics: 0.0.10
typescript: 2.3.4
webpack: 3.7.1

Chrome is fine. Something is obviously very wrong on my setup.

[rbleuse]

@filipesilva I can confirm that it happens on a clean project, as @maturecheese described.

Tested with fresh project & FF 36.0.1

$ ng --version

Angular CLI: 1.6.0
Node: 8.7.0
OS: win32 x64
Angular: 5.1.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.0
@angular-devkit/build-optimizer: 0.0.35
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.41
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.0
@schematics/angular: 0.1.10
@schematics/schematics: 0.0.10
typescript: 2.4.2
webpack: 3.10.0

[giacomofc]

FF 42 also affected - with newer CLI

Angular CLI: 1.6.3
Node: 8.9.0
OS: linux x64
Angular: 5.1.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cli: 1.6.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

[filipesilva]

I tested on Firefox 56 just now and it seems ok.

I think this might be related to the how webpack-dev-server (or dev server) only supports the last two major browser versions (https://github.com/webpack/webpack-dev-server#browser-support). It shouldn't affect non-serve builds.

You should be able to test this by doing ng build and serving the contents of dist with another server.

[giacomofc]

@filipesilva

Browser compatibility for let on Firefox:

1. Prior to Firefox 44, let is only available to code blocks in HTML wrapped in a <script type="application/javascript;version=1.7"> block (or higher version) and has different semantics (e.g. no temporal dead zone).

2. Prior to Firefox 46, a TypeError is thrown on redeclaration instead of a SyntaxError.

3. Firefox 54 adds support of let in workers.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

[kpaxton]

Just ran into this myself. I can also confirm that 1.4.9 works and 1.5.0 does not with firefox 31, 38, and 45. 52+ seems to works just fine for me.

I also see this issue regardless of whether it's the dev-server or not. building for production with or without aot still causes this issue for me.

@filipesilva Any ideas on when we might see a fix? What is blocking it?

[ghost]

Any news on this? I'm working on a project that is required to work on FF 38 and it is currently broken.

[filipesilva]

#9270 should address the usage of const and let on the ng serve but according to @kpaxton it also happens outside the dev server.

I don't think we force let anywhere on the CLI proper but I might be wrong. Can someone put up a repro of this error outside the dev server?

[skuby2]

Using 1.6.3, creating a new project with ng new, then attempting to run it on FF 36 gives me the same "SyntaxError: let is a reserved identifier vendor.bundle.js:..." error as described. Doing a production build and serving with http-server gives me "TypeError: this is undefined" in FF 36.

[kpaxton]

@filipesilva I can confirm that running from ng serve with 1.6.5 now works correctly in FF 31.

However, @skuby2 is also correct in that doing a production build (with or without aot) and serving up, for me with tomcat, I get a TypeError: this is undefined main.{hash}.js:1

Of course when I open up main.{hash}.js it's all on a single line and I have no idea which this it's referring to. Any idea's on how best to find that out?

[kpaxton]

I think I may have found the this it's referring to.
I've tracked it down to @angular/core PlatformRef(_injector) constructor. In the esm5 bundle it looks like this

var PlatformRef = /** @class */ (function () {
  /** @internal */
  function PlatformRef(_injector) {
    this._injector = _injector;      // this line is where I'm getting the 'TypeError: this is undefined'
    ...
  }
...
}

Looks like it's in packages/core/src/application_ref.ts lines 190-197 in the angular source.

[maychan111]

Confirmed that running ng serve --prod with @angular/cli@1.6.7 on a brand new project still have issue on Firefox 38: TypeError: this is undefined main.{hash}.js:

[irman]

Any update on this? At least a workaround, or even fallback to catch this error?

[rbleuse]

Yes, my comment on #9340 seems to be a workaround

[filipesilva]

Closing as the original problem seem to have been addressed meanwhile. #9340 is addressed too.

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