Skip to content

bug: crash after switching languages #3300

@zx-luo

Description

@zx-luo

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

Image

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;

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions