Undefined unavailableDate crash in DateRangePicker when using SSR optimized localized strings

ihsib commented 1 month ago

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

devongovett commented 1 month ago

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?

ihsib commented 1 month ago

@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 commented 2 weeks ago

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

adobe / react-spectrum