Unexpected Syntax on Old Browser

[PutawanDE]

I got SyntaxError: expected expression, got '?' reported to Sentry on my application. I noticed that it was from

(window[Symbol.for("ApolloSSRDataTransport")
] ??= []).push({
        "json": ......

This part was injected to HTML document of my website. Syntax ??= is not supported on my user's browser. I found that transportDataToJS function in dataTransport.ts return string of js containing this syntax.

So, what's the impact if this code doesn't work on the browser? And can we rewrite this using the older syntax?

[phryneas]

How old are we talking here?

By my knowledge, there is no browser version out there that is still receiving security updates or any other kind of vendor support that doesn't support this syntax:

• MDN compatibility table
• CanIUse entry

[PutawanDE]

Chrome version 67. Yes it is old. So I use a transpiler but the transpiler cannot transpile this because syntax ??= is in a string that is sent to client. Can I know how to deal with this issue? Thank you.

[phryneas]

I would probably suggest something like patch-package to replace this code with something like

  return `{let k=Symbol.for("${key}"),w=window;(w[k]=w[k]||[]).push(${htmlEscapeJsonString(
    stringify(data)
  )})}`;

I'm not convinced that we want to upstream that into the library itself though, since this code is injected into the webpage a lot and we want to save transferred data overall.