formatDateTimeRange gives: Cannot read property 'patternParts' of undefined

[TNAJanssen]

Which package?

react-intl
@formatjs/intl-datetimeformat
@formatjs/intl-getcanonicallocales
@formatjs/intl-listformat
@formatjs/intl-locale
@formatjs/intl-numberformat
@formatjs/intl-pluralrules
@formatjs/intl-relativetimeformat

Describe the bug

When using React Native with the polyfills it gives the error mentioned above, when not using the polyfills it will give the error:
getDateTimeFormat(locale, filteredOptions).formatRange is not a function (it is undefined)

Expected behavior

Smartphone (please complete the following information):

• Device: iPad and Android
• OS: iOS 16.5, Android 13
• Browser: n/a
• Version: React Native 0.71.3 with Hermes engine

[JustJoostNL]

Same issue here

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[JustJoostNL]

Still an issue.

[longlho]

do you have a repro?

[JustJoostNL]

<FormattedDateTimeRange
  day="numeric"
  month="short"
  weekday="short"
  hour="2-digit"
  minute="2-digit"
  year={thisYear ? undefined : "numeric"}
  from={sessionStartDate}
  hour12={config.use12HourTime}
  to={sessionEndDate}
/>

[TNAJanssen]

What can i do to help fix this? This issue for us is a major dealbreaker before being able to go live.

[longlho]

No one has provided a repro link yet. I'm not familiar w react native and hermes

[TNAJanssen]

@longlho working on a expo snack as we speak, the web version will always work because it does not need polyfills but the react native version does use the polyfills.

[TNAJanssen]

@longlho
https://snack.expo.dev/@tnajanssen/problem-with-format-js
You can download that as a zip, after that run:

• npm install
• npx expo start
• Start android or ios simulator or use a real device with expo go
• See error in terminal and wrongly formatted dates

The first value is normal date and the other 2 are ranges.

[TNAJanssen]

Without the polyfill this is the error (logical):

getDateTimeFormat(locale, filteredOptions).formatRange is not a function (it is undefined) TypeError: getDateTimeFormat(locale, filteredOptions).formatRange is not a function (it is undefined)

and with this is the error:

Cannot read property 'patternParts' of undefined TypeError: Cannot read property 'patternParts' of undefined at PartitionDateTimeRangePattern (http://10.8.0.63:8082/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:171375:41) at FormatDateTimeRange (http://10.8.0.63:8082/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:170257:83) at formatRange (http://10.8.0.63:8082/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:166141:60) at formatDateTimeRange (http://10.8.0.63:8082/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:137561:68) at FormattedDateTimeRange (http://10.8.0.63:8082/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:138276:50) at renderWithHooks (http://10.8.0.63:8082/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:90310:33) at mountIndeterminateComponent (http://10.8.0.63:8082/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:93392:34)

[TNAJanssen]

This is the value of internalSlots

{"boundFormat": [Function anonymous], "calendar": "gregory", "dataLocale": "nl", "dateStyle": "short", "day": "2-digit", "format": {"day": "2-digit", "hour": "2-digit", "minute": "2-digit", "month": "2-digit", "pattern": "{day}-{month}-{year} {hour}:{minute}", "pattern12": "{day}-{month}-{year} {hour}:{minute}", "rangePatterns": {}, "rangePatterns12": {}, "rawPattern": "HH:mm", "skeleton": "HH:mm", "year": "numeric"}, "hour": "2-digit", "hourCycle": "h23", "locale": "nl", "minute": "2-digit", "month": "2-digit", "numberingSystem": "latn", "pattern": "{day}-{month}-{year} {hour}:{minute}", "rangePatterns": {}, "timeStyle": "short", "timeZone": "UTC", "year": "numeric"}

[TNAJanssen]

What can i do to progress this issue further as this is big dealbreaker for us.

[longlho]

I can try looking tonight

[TNAJanssen]

@longlho if i Can help let me know!

[longlho]

something's wrong w/ best fit format matching for dateStyle & timeStyle so the workaround is to use

{
 year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
    second: 'numeric',
    }

as option

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[JustJoostNL]

Still an issue.

[TNAJanssen]

Yep, the workaround works for now but should be needed.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[JustJoostNL]

Still active.

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[TNAJanssen]

Still an issue

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[TNAJanssen]

Still an issue

[longlho]

Pin this so stalebot would go away. Fixing skeleton matching is non-trivial so will take some time once I found the time.