Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

"toHuman" uses Intl.ListFormat, which isn't supported by Safari < 14.1 #1189

Open
distinctdan opened this issue Apr 25, 2022 · 4 comments · May be fixed by #1585
Open

"toHuman" uses Intl.ListFormat, which isn't supported by Safari < 14.1 #1189

distinctdan opened this issue Apr 25, 2022 · 4 comments · May be fixed by #1585
Labels
issue: old browser

Comments

@distinctdan
Copy link

Describe the bug
I have a user who's on an older version of Safari, and they're getting an error about Intl.ListFormat. Looking through the luxon source, it looks like it's coming from toHuman. Unfortunately, Intl.ListFormat isn't supported by older versions of safari. Here's the error message (manually typed from a screenshot):

TypeError: undefined is not a constructor (evaluating "new Intl.ListFormat(e, t)")

It looks like this was added to luxon fairly recently, here's the place in the source:

luxon/src/impl/locale.js

Line 14 in c96b813

dtf = new Intl.ListFormat(locString, opts);

To Reproduce
Please share a minimal code example that triggers the problem:
I haven't been able to get a stack trace from our user, but here's where I think it's coming from:

dur.shiftTo('days').toHuman({
    unitDisplay: 'short',
    maximumFractionDigits: 1,
});

Desktop (please complete the following information):

  • OS: [OSX]
  • Browser [Safari, unknown version, sorry]
  • Luxon version [2.3.0]
  • Your timezone [America/New_York]

Additional context
CanIUse: https://caniuse.com/?search=intl.listFormat
This is also referenced here by this feature discussion: #688 (comment)
@icambron
Copy link
Member

icambron commented May 9, 2022

Yeah, I'd accept a fix that feature detects and just falls back to just using commas

@thatsmydoing thatsmydoing linked a pull request Jan 24, 2024 that will close this issue
Open
@shawnlauzon
Copy link

I'm hitting an error while using toHuman on React Native also, looks like the same issue.

@JavanPoirier
Copy link

In the meantime you can just use formatjs polyfills, I have it working with babel/expo.
https://formatjs.io/docs/polyfills/intl-listformat

@codewizardVN
Copy link

I'm hitting an error while using toHuman on React Native also, looks like the same issue.

Did you solve the problem, I think you can use formatjs to solve it!

Install module:

yarn add @formatjs/intl-listformat @formatjs/intl-getcanonicallocales @formatjs/intl-locale

Import modules inside index.js

import '@formatjs/intl-getcanonicallocales/polyfill';
import '@formatjs/intl-locale/polyfill';
import '@formatjs/intl-listformat/polyfill';
import '@formatjs/intl-listformat/locale-data/en';

Good luck!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
issue: old browser
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add simple polyfill for Intl.ListFormat thatsmydoing/luxon
5 participants
@icambron @shawnlauzon @distinctdan @JavanPoirier @codewizardVN