Safari: SynthaxError: Left hand side of operaor '=' must be a reference.

[alexfriesen]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

I am not sure.

Description

My Angular Application is crashing only on Safari when three.js is included.
The error message: SynthaxError: Left hand side of operaor '=' must be a reference.

Threre is a Stackoverflow Thread about this Issue:
https://stackoverflow.com/questions/66941849/chunkloaderror-in-angular-threejs-app-only-on-safari

🔬 Minimal Reproduction

I created this repo:
https://github.com/alexfriesen/angular-three-template

Which is deployed on:
https://alexfriesen.github.io/angular-three-template/

The same Code works just fine with Vite:
https://github.com/alexfriesen/retro

🔥 Exception or Error

SynthaxError: Left hand side of operaor '=' must be a reference.

🌍 Your Environment

Angular CLI: 12.0.3
Node: 14.17.0
Package Manager: npm 6.14.13
OS: linux x64

Angular: 12.0.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.3
@angular-devkit/build-angular   12.0.3
@angular-devkit/core            12.0.3
@angular-devkit/schematics      12.0.3
@angular/cli                    12.0.3
@schematics/angular             12.0.3
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

Tested with Safari 14

I looks like it is related to ES6 Changes in Three.js

[wulfsberg]

I am unsure whether ThreeJS is doing something crazy with its ES6 classes, but flat out getting a runtime syntax error in the production-built code just can't be right.
I see the "need investigation" tag. Is there anything we can do to help narrow it down?

[imario42]

I am having the exact same issue. Also something with isSpotlight. When disabling the optimization for scripts in angular.json it started to work. Not an option for prod builds though.

[petebacondarwin]

Here is another report on StackOverflow: https://stackoverflow.com/questions/68224800/left-hand-side-of-operator-must-be-a-reference-only-in-webkit-safari-in-ang

I also note from the reproduction that it only occurs when the code is minified (i.e. optimization: true).
So it seems that combination of how Three.js is generating its classes and how Terser is minifying them creates a syntax that Safari is not able to parse.

[petebacondarwin]

One last note: setting buildOptimizer to false, while leaving optmization at true resolves the issue as well.
So it appears to be the combination of the two that is causing the problem on Safari.

[wulfsberg]

Is this purely a Terser issue, then, and should be logged against that? Or does Angular do some preprocessing which confuses the tool chain?

[petebacondarwin]

The build optimizer pass is somethat specific to the Angular CLI. So it might be an issue on our side...

[alan-agius4]

This should no longer be an issue with 12.2 which is currently in pre-release.

Can someone please try this out using ng update @angular/cli --next?

[petebacondarwin]

The reproduction in the original description of this issue does indeed work with 12.2.0-next.3. 👍

[wulfsberg]

Seconded. Angular 12.2.0-next.3 and ThreeJS 0.130.1 play nicely together again.

[imario42]

Yep, that works for me too. Thanks alot!

[alan-agius4]

Closing as per above.

[alexfriesen]

It works now. Thanks!

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