Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(i18n): correct usage of language str having underscore #922

Merged
merged 1 commit into from Oct 19, 2023
Merged

fix(i18n): correct usage of language str having underscore #922

merged 1 commit into from Oct 19, 2023

Conversation

imkero
Copy link
Contributor

@imkero imkero commented Oct 19, 2023 •
edited

Goal

Fix the JS exception in web app when user selects a language which name contains an underscore (e.g., zh_Hans).

Exception Stack

RangeError: Incorrect locale information provided
  at formatShortDateTime (https://.../src/app/utils.js?t=1697702760936:3:140)
  at NotificationItem (https://.../src/components/Notifications.jsx:15:229)
  at renderWithHooks (https://.../node_modules/react-dom/cjs/react-dom.development.js:17:16305)
  at error (https://.../node_modules/react-dom/cjs/react-dom.development.js:12:20074)
  at pushTreeId (https://.../node_modules/react-dom/cjs/react-dom.development.js:15:21587)
  at beginWork$1 (https://.../node_modules/react-dom/cjs/react-dom.development.js:13:27426)
  at setCurrentFiber (https://.../node_modules/react-dom/cjs/react-dom.development.js:11:26557)
  at workLoopSync (https://.../node_modules/react-dom/cjs/react-dom.development.js:4:26466)
  at renderRootSync (https://.../node_modules/react-dom/cjs/react-dom.development.js:6:26434)

Reason

Intl.DateTimeFormat expects kebab-case language name (e.g., zh-Hans), but i18n.language in snake-case (e.g., zh_Hans) was passed to Intl.DateTimeFormat directly, which causes a RangeError.

> new Intl.DateTimeFormat('zh_Hans')
Uncaught RangeError: Incorrect locale information provided

Reproduce

  1. Open the web app
  2. Subscribe to a topic having at least one notification
  3. Switch to setting page and set the language to 简体中文 zh_Hans (or another one which has an underscore in its name)
  4. Refresh the web page

Changes

  1. Before calling new Intl.DateTimeFormat, replace _ with - in language
  2. (nice to have 😄) Before setting lang attribute of <html>, replace _ with - in language

@binwiederhier
Copy link
Owner

Oh wow. Amazing. I have been trying to reproduce this issue for a while but couldn't. Thank you!

@binwiederhier binwiederhier merged commit 43b11de into binwiederhier:main Oct 19, 2023
@imkero imkero deleted the bugfix/language-with-underline branch October 24, 2023 03:02
This was referenced Nov 6, 2023
Closed
Closed
@Potat0000 Potat0000 mentioned this pull request Nov 6, 2023
Closed
@binwiederhier binwiederhier mentioned this pull request Nov 19, 2023
Closed
@imkero imkero changed the title fix(i18n): correct usage of language str having underline fix(i18n): correct usage of language str having underscore Nov 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
2 participants
@imkero @binwiederhier