Left hand side of operator '=' must be a reference. Only in Webkit/Safari in Angular production build

Viewed 653

I've developed a project using Angular.
When I build it using for production I get no errors and everything works fine on Chrome.
If I run the app on Webkit/Safari the console prints this error:

SyntaxError: Left hand side of operator '=' must be a reference. (funzione anonima) — main.ebe5d823e9b701706d6f.js:1 Elemento selezionato

Here is the content of main.ebe5d823e9b701706d6f.js (formatted by the browser):

(self.webpackChunkfrontend = self.webpackChunkfrontend || []).push([[179], {
3597: t => {
    function e(t) {
        return Promise.resolve().then(() => {
            var e = new Error("Cannot find module '" + t + "'");
            throw e.code = "MODULE_NOT_FOUND", e
        })
    }
    e.keys = () => [],
    e.resolve = e,
    e.id = 3597,
    t.exports = e
},
88642: (t, e, n) => {
    "use strict";
    n.d(e, {
        T: () => l
    });

I don't think that the error is thrown by self.webpackChunkfrontend = self.webpackChunkfrontend but I don't know how to solve it because the browser doesn't says which is the assignment that causes the error.

2 Answers

I've solved the issue.

The problem was caused by the npm module three. There is a problem in the isSpotLight method.

I've removed the feature that was using that module, so now the app works also on Safari/WebKit.

These are the steps that I've followed to debug the issue:

  • Copy the content of main.ebe5d823e9b701706d6f.js
  • Go to an online JS Beautifier
  • Paste the code and beautify it
  • Copy the beautified code to main.ebe5d823e9b701706d6f.js
  • Reload the page in Safari. Now the console prints the correct line number with the error.

Setting buildOptimizer=false to angular.json seems to solve the issue for versions 11 and down. In the GitHub repo they say that this issue is fixed for versions 12+ but I haven't tested it to confirm it.

https://github.com/angular/angular-cli/issues/21107

Related