react-spectrum icon indicating copy to clipboard operation
react-spectrum copied to clipboard

Undefined unavailableDate crash in DateRangePicker when using SSR optimized localized strings

Open ihsib opened this issue 1 year ago โ€ข 3 comments

Provide a general summary of the issue here

When using latest @react-aria/optimize-locales-plugin in next.js for optimizing locales with react-aria-components package the datepicker crashes the page.

The error call stack looks like this:

TypeError: Cannot read properties of undefined (reading 'unavailableDate')
    at a.getStringForLocale (LocalizedStringDictionary.mjs:17:1)
    at o.format (LocalizedStringFormatter.mjs:15:1)
    at y (utils.mjs:51:1)
    at useDatePickerState.mjs:58:98
    at Object.aQ [as useMemo] (react-dom.production.min.js:179:117)
    at n.useMemo (react.production.min.js:25:191)
    at L (useDatePickerState.mjs:58:47)
    at useDatePickerState.mjs:121:1
    at ab (react-dom.production.min.js:167:135)
    at uo (react-dom.production.min.js:193:55)

๐Ÿค” Expected Behavior?

The @react-aria/optimize-locales-plugin package should let me optimize which locales I want to include in my bundle without crashing pages using the datepicker.

๐Ÿ˜ฏ Current Behavior

  • If the Datepicker isDateUnavailable callback returns true, the page will crash because of missing unavailableDate in provided locale.

๐Ÿ’ Possible Solution

A similar issue was fixed in https://github.com/adobe/react-spectrum/pull/6286. Maybe something needs to be adjusted for unavailableDate.

๐Ÿ”ฆ Context

No response

๐Ÿ–ฅ๏ธ Steps to Reproduce

git clone https://github.com/ihsib/react-aria-datepicker--locale-optimize-bug

npm install

npm run build

npm run start

Open http://localhost:3000 try inputting a date in the past with the keyboard for example 2023-01-01

Version

1.2.1

What browsers are you seeing the problem on?

Microsoft Edge

If other, please specify.

No response

What operating system are you using?

Windows

๐Ÿงข Your Company/Team

No response

๐Ÿ•ท Tracking Issue

No response

ihsib avatar May 21 '24 10:05 ihsib

Hmm this error uses the browser's language rather than the one set by the provider and included by the server. Maybe these are different?

devongovett avatar May 25 '24 15:05 devongovett

@devongovett Setting i18n in next.config.js seemed to solve our issues.

   i18: {
      locales: ["en", "en-US"],
      defaultLocale: "en"
   },

Do you still need the I18Provider if you are using LocalizedStringProvider in next.js?

ihsib avatar Jun 05 '24 12:06 ihsib

@devongovett @snowystinger any update on if I18Provider is still needed if you use LocalizedStringProvider in next.js in next.config.js?

ihsib avatar Jun 24 '24 10:06 ihsib