I’m using ThreeJS in Angular. Last week I compiled my code and upload the latest version of app to server then I faced the errors below on Mac and iPhone.
SyntaxError: Left hand side of operator '=' must be a reference
Error: Uncaught (in promise): ChunkLoadError: Loading chunk 4 failed. (missing: https://www.xxxxx.com/4.7c25f3405f531545d2e4.js)
These errors are exist only on Safari . However the missing chunk file according to Safari is accessible. Empty cache or cleaning cache in other ways did not help.
I had research about the errors and the situation. I found 2 ways which are creating global error handler for chunk load error and transforming app to PWA to solve the problem with service worker. I tried handle the ChunkLoadError and reloading when the error happens. However it is not fixed and infinite reloading happened. Also I tried transforming my application to PWA and the result was same.
Generally all the approach about to determine the reason of this problem are saying that in every compilation with --output-hashing=chunk (this option is default of angular compiler) file names are being changed and naturally browsers cant find the correct files. Therefore in most of solution, it is suggested to not remove old files. But according to these solutions cache cleaning is supposed to fix the problem. However it is not worked for me.
While I was trying things, I have realized that if I remove components that include ThreeJS then these errors are gone. Maybe you can think it is about to change ES5 to ES6 because of the package but I was using ES6 since at the beginning. Apart from that if I do not use --prod app works fine also.
The dependencies:
"dependencies": {
"@angular/common": "~11.2.0",
"@angular/core": "~11.2.0",
"@angular/forms": "~11.2.0",
"@angular/platform-browser": "~11.2.0",
"@angular/platform-browser-dynamic": "~11.2.0",
"@angular/router": "~11.2.0",
"@angular/service-worker": "~11.2.0",
"@auth0/angular-jwt": "^5.0.2",
"@capacitor/core": "2.4.7",
"@ionic/angular": "^5.5.2",
"@ionic/storage-angular": "^3.0.2",
"rxjs": "~6.6.0",
"three": "^0.126.1",
"tslib": "^2.0.0",
"zone.js": "~0.10.2"
}