Intl.DateTimeFormat not polyfilled correctly and always flag crashes Firefox

[nickrttn]

Bug report

The Intl.DateTimeFormat polyfill doesn't correctly detect support for formatRange in Firefox (86). That browser doesn't support formatRange and formatRangeToParts but also doesn't receive the polyfill by default.

If the always flag is passed to force the polyfill Firefox will report an error Uncaught TypeError: Setter must be a function coming from the polyfill script.

Expected behaviour

• formatRange and formatRangeToParts to be polyfilled when requesting the polyfill for a browser that has parts of Intl.DateTimeFormat.
• always flag not to cause an error

Steps to reproduce

• Request the Intl.DateTimeFormat polyfill and the en locale (with/without |always) in Firefox

Environment

• Firefox 86
• MBP, macOS Big Sur

[JakeChampion]

@nickrttn Thank you for the issue, I've transferred it to the polyfill-library repository as that is the place where the polyfills are implemented for polyfill.io

@longlho, have you seen this Intl error for Firefox 86 before?

We currently only target Firefox version below 51: https://github.com/Financial-Times/polyfill-library/blob/493d2d606ef21de644f2b0c62d671d83877175bd/polyfills/Intl/DateTimeFormat/config.toml#L37

I see MDN states some DateTimeFormat features are only available in Firefox 84. MDN hasn't got a version defined for formatRange yet -- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#browser_compatibility

Does anyone know which version of Firefox added support for the feature?

[romainmenke]

@JakeChampion MDN is correct. Firefox doesn't have support for formatRange

var date1 = new Date(Date.UTC(2007, 0, 10, 10, 0, 0));
var date2 = new Date(Date.UTC(2007, 0, 10, 11, 0, 0));

var fmt1 = new Intl.DateTimeFormat("en", {
		year: '2-digit',
		month: 'numeric',
		day: 'numeric',
		hour: 'numeric',
		minute: 'numeric'
});

console.log(!!fmt1.formatRange(date1, date2)) // Uncaught TypeError: fmt1.formatRange is not a function

[JakeChampion]

Thank you for confirming @romainmenke 🙌

I've raised a pull-request to serve this polyfill to all Firefox versions -- #1013

[romainmenke]

I think the same issue also exists for other browsers.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatRange#browser_compatibility

ran some tests and seeing the same results for Blink,Webkit,Gecko as stated by MDN

[JakeChampion]

ran some tests and seeing the same results for Blink,Webkit,Gecko as stated by MDN

MDN lists Blink (Chrome and Edge but not Samsung Browser) as supporting formatRange. Did your tests show Chrome and Edge as not supporting Intl.DateTimeFormat.formatRange?

[romainmenke]

Chrome supports it, but from 76
So this should work : 4ca7ff2#diff-77edc5e4fe23dd90eb39468935b117d0add719ecfc03b83473a1980568198b9eR39

[longlho]

@JakeChampion do you still need me to look at anything?

[JakeChampion]

@JakeChampion do you still need me to look at anything?

I don't think so, @romainmenke helped solve this 😄

[nickrttn]

Thanks for the quick action on this issue folks!

The polyfill is now correctly being served. The Intl.DateTimeFormat polyfill does still break with the |always flag. It also happens in Chrome and likely other browsers as well. Should I create a new issue for that?

[JakeChampion]

Thanks for the quick action on this issue folks!

The polyfill is now correctly being served. The Intl.DateTimeFormat polyfill does still break with the |always flag. It also happens in Chrome and likely other browsers as well. Should I create a new issue for that?

We haven't released this change onto npm or onto polyfill.io yet

[nickrttn]

🤦 my bad :) I'll keep an eye on your releases