-
Notifications
You must be signed in to change notification settings - Fork 597
Description
Issue description
When switching languages in the dashboard, clicking on any language other than Chinese (zh) causes a runtime error: "Cannot read properties of undefined (reading 'percent')"
Expected behavior
Users should be able to switch between all available languages (en, de, zh, es, tr) without any errors.
How to Reproduce
1.Open the APISIX Dashboard
2.Click on the language icon in the header
3.Select any language other than Chinese (e.g., English, Deutsch, Español, Türkçe)
4.Observe the error in the console: "Cannot read properties of undefined (reading 'percent')"
Screenshots
N/A
Environment
apisix version: N/A
OS: Windows (win32)
OpenResty / Nginx version: N/A
etcd version: N/A
apisix-dashboard version: Latest (master branch)
Browser version: Any modern browser
Additional context
Root Cause: The issue occurs in two places:
vite.config.ts: The i18nProgress plugin was configured with langs: ['zh'], but the language menu supports 5 languages (en, de, zh, es, tr). When accessing progress data for non-Chinese languages, i18nProgress[lang] is undefined.
src/components/Header/LanguageMenu.tsx: The TranslationProgress component directly accesses i18nProgress[lang].percent without checking if the data exists.
Solution:
Update vite.config.ts to include all languages in the i18nProgress plugin configuration: langs: ['zh', 'en', 'de', 'es', 'tr']
Add optional chaining in LanguageMenu.tsx: const progressData = i18nProgress[lang as keyof typeof i18nProgress]; const percent = progressData?.percent;
