js-temporal.js 'GetFormatterParts' broken in Firefox 96.0 and Chromium 96.0.4664.110...

[tvanriper]

Describe the Bug

Use of the DayStepper widget will cause your application to fail (not render) in newer versions of Firefox and Chromium (presumably Chrome as well, possibly also the myriad of other browsers using that engine). Note that it does work in Firefox 95.0.2.

You may get a stack trace similar to this:

Uncaught TypeError: time is undefined
    GetFormatterParts js-temporal.js:8486
    GetIANATimeZoneDateTimeParts js-temporal.js:8410
    GetIANATimeZoneOffsetNanoseconds js-temporal.js:8312
    getOffsetNanosecondsFor js-temporal.js:10654
    Call js-temporal.js:2267
    GetOffsetNanosecondsFor js-temporal.js:7917
    BuiltinTimeZoneGetPlainDateTimeFor js-temporal.js:7935
    TemporalInstantToString js-temporal.js:8087
    Instant js-temporal.js:11335
    instant js-temporal.js:13426
    app js-temporal.js:13434
    plainDateTime js-temporal.js:13436
    plainDate js-temporal.js:13465
    get_daystamp datetime.js:80
    instance$t DayStepper.svelte:34
    init index.mjs:1862
    DayStepper bundle.js:41197
    create_default_slot_8$1 bundle.js:71939
    create_slot index.mjs:69
    create_fragment$z bundle.js:33771
    init index.mjs:1877
    CardSection bundle.js:33991
    create_default_slot_5$1 bundle.js:72124
    create_slot index.mjs:69
    create_fragment$D bundle.js:32521
    init index.mjs:1877
    CardContainer bundle.js:32791
    create_fragment$1 bundle.js:72678
    init index.mjs:1877
    StatusDevices bundle.js:72973
    create_default_slot_8 bundle.js:73180
    create_slot index.mjs:69
    create_else_block$e bundle.js:42987
    create_default_slot$j bundle.js:43161
    create_slot index.mjs:69
    create_fragment$s bundle.js:42258
    init index.mjs:1877
    Router bundle.js:42629
    create_if_block$g bundle.js:42931
    update bundle.js:43270
    update index.mjs:1085
    flush index.mjs:1052
    init index.mjs:1894
    App bundle.js:73940
    app main.js:3
    <anonymous> bundle.js:73959

Reproduction

Import DayStepper from 0.5.2 of @kahi-ui/framework.

Use it, binding 'value' to a variable.

System Info

System:
    OS: Linux 5.10 Manjaro Linux
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 543.38 MB / 15.60 GB
    Container: Yes
    Shell: 5.1.12 - /bin/bash
  Binaries:
    Node: 17.3.0 - /usr/bin/node
    Yarn: 1.22.17 - /usr/bin/yarn
    npm: 8.3.0 - /usr/bin/npm
  Browsers:
    Chromium: 96.0.4664.110
    Firefox: 96.0

Note: Also saw this issue in macOS 12.1, but not on Safari 15.2.

Additional Context

No response

[tvanriper]

Some additional information...

It's complaining that the variable 'time' doesn't exist. Ignoring the existential, it's clearly defined around line 8474, but I wonder if there's some update to JavaScript that doesn't like the syntax you're using there.

[tvanriper]

Oh no, it's much worse than I thought...

All of your widgets for handling dates and times are impacted by this, likely because you're using that same function everywhere.

[tvanriper]

Ah, it's the temporal polyfill that has the bug and you've inherited it. Gads. This is going to impact a lot of libraries.

[tvanriper]

I'll submit a bug-fix to your dependency. Sorry for the trouble, but at least you're now aware of it, heh.

[tvanriper]

Ah, no maybe you need an update:

js-temporal/temporal-polyfill#92

[novacbn]

Thanks for the report!

I actually ran into this issue while working on the upcoming stylesheet rework. And tested the newer 0.3.0 polyfill release and seemed to fix it in Chrome. But a new issue came up with calendar handling with non-ISO-8601 (or maybe just Gregorian) calendars in FF 96+.

RangeError: Era a (ISO year 2022) was not matched by any era
    completeEraYear calendar.js:1477
    adjustCalendarDate calendar.js:1506
    isoToCalendarDate calendar.js:593
    temporalToCalendarDate calendar.js:836
    dateAdd calendar.js:1922
    dateAdd calendar.js:102
    CalendarDateAdd ecmascript.js:1402
    add plaindate.js:126
    instance DayPicker.stories.svelte:27
    init index.mjs:1778
    DayPicker_stories DayPicker.stories.svelte:2698
    createProxiedComponent svelte-hooks.js:245
    ProxyComponent proxy.js:239
    Proxy<DayPicker.stories> proxy.js:339
    create_fragment RegisterContext.svelte:34
    init index.mjs:1793
    RegisterContext RegisterContext.svelte:142
    createProxiedComponent svelte-hooks.js:245
    ProxyComponent proxy.js:239
    Proxy<RegisterContext> proxy.js:339
    default collect-stories.js:49
    <anonymous> DayPicker.stories.svelte:2714

A workaround seemed to be explicitly only use the ISO-8601 calendar, but then the components wouldn't automatically inherit the user's defaults. So I'm going to have to look into it a bit more.

[tvanriper]

Yeah, I noticed that the polyfill created breaking changes between 0.2.x and 0.3.x, which is a tad frustrating, as it prevents you from easily providing a 0.5.3 update.

For now, for my project, I've gone to using something else that isn't quite as nice.

[novacbn]

Fixed in v0.6.0.