stuck trying toZonedDateTimeISO

[dimaqq]

import {Temporal} from "proposal-temporal/lib/index.mjs";

...
  return (new Temporal.Instant(123)).toZonedDateTimeISO("Europe/Berlin");
// TypeError: cannot convert number to bigint

...
  return (new Temporal.Instant(BigInt(123))).toZonedDateTimeISO("Europe/Berlin");
// TypeError: use compare() or equals() to compare Temporal.ZonedDateTime

[Ms2ger]

Not sure who's trying to compare the return value; in devtools, this works:

» (new Temporal.Instant(BigInt(123))).toZonedDateTimeISO("Europe/Berlin").toString()
← "1970-01-01T01:00:00.000000123+01:00[Europe/Berlin]"

[dimaqq]

Interesting... how do you import the proposal in dev tools?
Maybe it's babel/webpack somehow breaking things? The stack trace had valueOf in it... so I guess react was trying to stringify the timezoned object in some other way than toString()?

[dimaqq]

My original issue can be reduced to this:
new Temporal.Instant(0n).toZonedDateTimeISO("Europe/Berlin").valueOf()

[dimaqq]

The reasoning is in https://github.com/tc39/proposal-temporal/blob/main/meetings/agenda-minutes-2020-05-07.md so I guess all that may be needed is to document this convention.

[ptomato]

@dimaqq Did you manage to track down the issue? If there is some React display code that is calling valueOf before toString, maybe we need to take this into account?

[dimaqq]

Here's what happens:

• I intended to paste string value into JSX, but pasted a Temporal.ZonedDateTime object
• react/react-reconciler doesn't like weird objects that and calls throwOnInvalidObjectType on it
• the source code of that function† looks reasonable, but somehow gets compiled into "foo" + newChild + "bar"‡
• any arithmetic on ZonedDateTime crashes with error about comparison or eqaulity

† https://github.com/facebook/react/blob/98313aaa7ea58d49eb30ecffc0f9eb6fc1ef467a/packages/react-reconciler/src/ReactChildFiber.new.js#L223-L235

‡ compiled to throw Error( "Objects are not valid as a React child (found: " + (Object.prototype.toString.call(newChild) === '[object Object]' ? 'object with keys {' + Object.keys(newChild).join(', ') + '}' : newChild) + "). If you meant to render a collection of children, use an array instead." );

Ultimately I guess the decision is up to you or someone here... I feel that tinkering with valueOf is error-prone.

[justingrant]

Looks like the React problem was fixed in facebook/react#20617. Closing this issue. Thanks @dimaqq for reporting the problem and getting it fixed in React! 🎉