remix icon indicating copy to clipboard operation
remix copied to clipboard

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

Open williamsdyyz opened this issue 3 years ago • 13 comments

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

williamsdyyz avatar Feb 11 '22 18:02 williamsdyyz

Any progress on this one?

alancoppin avatar Jun 01 '22 05:06 alancoppin

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?

sergiodxa avatar Jun 01 '22 17:06 sergiodxa

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?

williamsdyyz avatar Jun 01 '22 17:06 williamsdyyz

@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

alancoppin avatar Jun 01 '22 20:06 alancoppin

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.

williamsdyyz avatar Jun 01 '22 21:06 williamsdyyz

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?

sergiodxa avatar Jun 01 '22 22:06 sergiodxa

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?

marwan38 avatar Jun 01 '22 22:06 marwan38

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

HosseinAgha avatar Oct 11 '22 10:10 HosseinAgha

@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.

sergiodxa avatar Oct 11 '22 17:10 sergiodxa

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.

HosseinAgha avatar Oct 12 '22 11:10 HosseinAgha

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

lili21 avatar Oct 24 '22 09:10 lili21

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?

HosseinAgha avatar Oct 25 '22 07:10 HosseinAgha

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

machour avatar Oct 25 '22 07:10 machour

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:

image

xHomu avatar Nov 25 '22 22:11 xHomu

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

Screenshot 2022-12-03 at 8 14 42 AM

jfsiii avatar Dec 03 '22 15:12 jfsiii

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

brophdawg11 avatar Dec 14 '22 15:12 brophdawg11

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

pcattori avatar Jul 19 '24 08:07 pcattori