All client side javascript fails to run on non ES-2020 compliant browsers (PRODUCTION only)

[williamsdyyz]

What version of Remix are you using?

1.1.3

Steps to Reproduce

npx create-remix@latest (with typescript, remix app server) remix build (Must be a production build. Development doesn't have the problem) start

Go to localhost:3000 using a non ES-2020 compliant browser (I'm using Safari 12.5) Check the js console and you will see errors

Expected Behavior

Client side JavaScript should run without syntax errors on browsers that don't support ES-2020

Actual Behavior

ALL Client side JavaScript fails to run. Safari 12.5 reports Syntax error: Unexpected token '?'

It appears that the some of the client bundles contain the nullish coalescing operator (??) which is an ES-2020 feature. ES-2020 is too new. There are still many devices out there that can't support it such as older iPhones.

Again, this only happens in the PRODUCTION build.

There appear to be three places where this is happening, only one of which I've tracked down to source code:

1. ScrollRestoration component inside dangerouslySetInnerHTML (this has been reported and fixed already)
2. Unknown source. Appears in multiple entry.client-XXXXX.js bundles. Looks like this:

   var t=n.checked;return R({},n,{defaultChecked:void 0,defaultValue:void 0,value:void 0,checked:t??e._wrapperState.initialChecked})}function Po(e,n){var

3. Unknown source. Appears in multiple other chunks. Looks like this:

   :A)}),L=Math.min(Math.max(b??v.length-1,0),v.length-1),B=e.Action.Pop,O=v[

[alancoppin]

Any progress on this one?

[sergiodxa]

Could you check of the code where this happens is actual Remix code? I think Remix compiler is not transpiling external dependencies to older versions of JS so maybe you have a dependency that uses ??.

If you create a new Remix app, without adding any extra code, does the app break too?

[williamsdyyz]

As I said in the steps to reproduce, the code is whatever npx create-remix@latest generates - there are no external dependencies beyond that.

Could you check of the code where this happens is actual Remix code? I think Remix compiler is not transpiling external dependencies to older versions of JS so maybe you have a dependency that uses ??.

If you create a new Remix app, without adding any extra code, does the app break too?

[alancoppin]

@sergiodxa that's correct... at the init commit of npx create-remix@latest, no error is thrown but as soon as you create a dummy component it's throwing this error Syntax error: Unexpected token '?' see on https://remix-image-latest-fuak5x7eg-alancoppin-archipro.vercel.app/ Safari 12.1

Here is my dummy component

import React from 'react'
type Props = {}
const Test = (props: Props) => {
  return (<div>test</div>)
}
export default Test

[williamsdyyz]

Yes. I guess I forgot that small point. It's been 4 months since I logged this. Long since deleted the test and moved on.

[sergiodxa]

I think React is doing this, I checked the JS code and the code surrounding the ?? in entry.client.js looks like React specific code.

Maybe Remix should compile React?

[marwan38]

Patching the remix compiler to add target: ["safari12.1"] is fixing this issue. I'm not sure what it's compiling exactly... I don't think esbuild compiles node_module deps, does it?

[HosseinAgha]

@sergiodxa this looks like a major blocker for everybody, do you have any plans to support older browsers?

[sergiodxa]

@HosseinAgha I don't work at Remix, I don't know if they plan to support older browsers, I suppose any browser supporting <script type="module"> should be supported since they'll load JS.

But again I don't work at Remix so I can't talk about their plans.

[HosseinAgha]

OK, I did a small search and found this document. Looks like the Remix team plans to rely on the progressive enhancement nature of Remix for older browsers.

But according to the document, all browsers with ESModule support are supported: https://caniuse.com/es6-module

The thing is that it looks like Remix does not transpile ESNext code to ES2015 so if you use an ES2020 feature like ?? your users' browser should support it.

I think we should either fix the documentation or transpile it to ES2015.

[lili21]

Syntax error: Unexpected token '?'. same issue here.

[HosseinAgha]

Politely mentioning @machour @mcansh as it seems you've worked on ESM.
Am I wrong here https://github.com/remix-run/remix/issues/1901#issuecomment-1275993355? should our users use browsers with ES2020+ support? Do you have any plans to compile down to ES2015? Is this actually a bug or a feature?

[machour]

Hi, I don't work at Remix. I'll try to get some eyes on this issue soon tho.

[xHomu]

With the help @machour and @pcattori, I was able to patch Safari support to Remix for nalu.wiki:

---

The trick is adding target: ["safari12.1"] to Remix esbuild config with patch-packages:

https://github.com/remix-run/remix/blob/main/packages/remix-dev/compiler/compileBrowser.ts#L86

My patch: https://gist.github.com/xHomu/1d743000144ecd544cd958c43c47b488

But you can generate your own following the instruction here.

patch-package needs to run before remix build. For our production build on flyio, we added the following to the Remix Dockerfile:

[jfsiii]

I created a ticket for the issues in mobile safari on iOS 11

mobile safari on iOS 11.0 is the first version to support ES Modules

[brophdawg11]

Hey folks, there's a proposal now for .browserlistrc support if you want to give that an upvote, I think that would help with these issues: https://github.com/remix-run/remix/discussions/4769

[pcattori]

Remix Vite was stabilized a couple months ago and Vite solves this via build.target config option.