eythaann/Seelen-UI · error · Error

no translation for key "${key}"

Error message

no translation for key "${key}"

What it means

translate() throws this error when the locale value is falsy after being resolved for a given key. Despite the message wording, the check is `if (!locale)` — the active locale string is empty/undefined when looking up the key, meaning no translation can be resolved under the current (missing) locale.

Source

Thrown at libs/ui/svelte/utils/i18n.svelte.ts:10

import yaml from "js-yaml";

let _locale = $state("en");
let _messages = $state.raw<Record<string, any>>({});

function translate(locale: string, key: string, vars: Record<string, string> = {}) {
  // Let's throw some errors if we're trying to use keys/locales that don't exist.
  // We could improve this by using Typescript and/or fallback values.
  if (!key) throw new Error("no key provided to $t()");
  if (!locale) throw new Error(`no translation for key "${key}"`);

  // Grab the translation from the translations object.
  // Support nested keys like "profile.log_out"
  const keys = key.split(".");
  let text = _messages[locale];

  for (const k of keys) {
    text = text?.[k];
  }

  if (!text) {
    console.error(`no translation found for ${locale}.${key}`);
    // Try fallback to English
    let fallback = _messages["en"];
    for (const k of keys) {
      fallback = fallback?.[k];
    }
    text = fallback || key;

View on GitHub (pinned to dee4aaa940)

Solutions

  1. Initialize the i18n module (load locale/messages) before rendering components that call t().
  2. Provide a default locale fallback so _locale is never empty (e.g. default to 'en').
  3. Verify the messages file for the active locale exists and loads without error.
  4. Gate rendering on i18n readiness (await locale setup, or show a loading state).

Example fix

// before: setLocale(userLocale); /* userLocale may be '' */ t('app.title'); // throws
// after: setLocale(userLocale || 'en'); t('app.title'); // resolves with the default locale
Defensive patterns

Strategy: fallback

Validate before calling

if (!locale) { setLocale('en'); } // default before any t() call

Type guard

function hasLocale(state: { locale?: string }): state is { locale: string } { return typeof state.locale === 'string' && state.locale.length > 0; }

Try / catch

try { text = $t('app.title'); } catch (e) { if (e instanceof Error && e.message.startsWith('no translation for key')) { text = 'app.title'; } else { throw e; } }

Prevention

When it happens

Trigger: Calling t(key) before the i18n module loaded its locale/messages (so _locale is empty); setLocale('') or an unset locale at startup; the translation file for the locale failed to load; calling t() during module init before i18n bootstrap completed.

Common situations: Rendering a Svelte component before the app's i18n bootstrap ran; a locale code typo or unsupported locale yielding no messages entry; async locale loading racing first render; test environments where the i18n store was never initialized.

Related errors


AI-assisted analysis of eythaann/Seelen-UI@dee4aaa940 (2026-09-03). Data as JSON: /api/errors/00297046fd7fc8ea. Report an issue: GitHub.