[PR #922] [MERGED] fix(i18n): correct usage of language str having underscore #1465

New issue

Closed

opened 2026-05-07 01:02:13 +02:00 by BreizhHardware · 0 comments

BreizhHardware commented

2026-05-07 01:02:13 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/binwiederhier/ntfy/pull/922
Author: @imkero
Created: 10/19/2023
Status: ✅ Merged
Merged: 10/19/2023
Merged by: @binwiederhier

Base: main ← Head: bugfix/language-with-underline

📝 Commits (1)

ef45ea5 fix(i18n): correct usage of language str having underline

📊 Changes

2 files changed (+10 additions, -4 deletions)

View changed files

📝 web/src/app/utils.js (+8 -2)
📝 web/src/components/App.jsx (+2 -2)

📄 Description

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

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

Changes

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

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/binwiederhier/ntfy/pull/922 **Author:** [@imkero](https://github.com/imkero) **Created:** 10/19/2023 **Status:** ✅ Merged **Merged:** 10/19/2023 **Merged by:** [@binwiederhier](https://github.com/binwiederhier) **Base:** `main` ← **Head:** `bugfix/language-with-underline` --- ### 📝 Commits (1) - [`ef45ea5`](https://github.com/binwiederhier/ntfy/commit/ef45ea5a50ffd010685e4dfb116f355783fc7daa) fix(i18n): correct usage of language str having underline ### 📊 Changes **2 files changed** (+10 additions, -4 deletions) <details> <summary>View changed files</summary> 📝 `web/src/app/utils.js` (+8 -2) 📝 `web/src/components/App.jsx` (+2 -2) </details> ### 📄 Description ## Goal Fix the JS exception in web app when user selects a language which **name contains an underscore** (e.g., `zh_Hans`). **Exception Stack** ```plaintext 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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat), replace `_` with `-` in `language` 2. (nice to have :smile:) Before setting `lang` attribute of `<html>`, replace `_` with `-` in `language` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>