No locale provided for 'home.title' key. Skipping translation... #194

sydseter · 2024-11-21T12:18:19Z

sydseter
Nov 21, 2024

I am trying to implement: https://github.com/sveltekit-i18n/lib/tree/master/examples/locale-router-static

But I I am unable to do it.

These are my dependencies:

"dependencies": {
"@sveltejs/adapter-static": "^3.0.1",
"@types/js-yaml": "^4.0.9",
"front-matter": "^4.0.2",
"js-yaml": "^4.1.0",
"svelte-i18n": "^4.0.1",
"svelte-markdown": "^0.4.1",
"sveltekit-i18n": "^2.4.2",
"sync-request": "^6.1.0",
"vite-plugin-restart": "^0.4.0",
"vite-plugin-static-copy": "^1.0.0"
}

error:

No locale provided for 'home.title' key. Skipping translation...

My translations/en/home.js

{
  "title": "Home",
  "home": {
    "title": "home"
  }
}

My translations/en/index.js

import home from './home.json';

export default {
  home
};

My translations/index.js

import i18n from 'sveltekit-i18n';
import en from './en';
import lang from './lang';

/** @type {import('sveltekit-i18n').Config} */
const config = {
  log: {
    level: 'warn',
  },
  translations: {
    en: {
      ...en,
      lang,
    }
  },
};

export const defaultLocale = 'en';

export const { t, locale, locales, loading, setLocale, translations } = new i18n(config);

My hook.server.js

import { defaultLocale, locales, setLocale, locale } from '$lib/translations';

/** @type {import('@sveltejs/kit').Handle} */

export const handle = async ({ event, resolve }) => {
  const { url, request } = event;

  // Get defined locales
  const supportedLocales = locales.get().map((l) => l.toLowerCase());

  // Get user preferred locale
  let userLocale = request.headers.get('accept-language') || defaultLocale;


  // Set default locale if user preferred locale does not match
  if (!supportedLocales.includes(userLocale)) userLocale = defaultLocale;
  locale.set(userLocale);
  await setLocale(userLocale);

  // Add html `lang` attribute
  return resolve({ ...event, locals: { lang: locale } }, {
    transformPageChunk: ({ html }) => html.replace(/<html.*>/, `<html lang="${locale}">`),
  });
};

/** @type {import('@sveltejs/kit').HandleServerError} */
export const handleError = async ({ event }) => {
    const { locals } = event;
    const { lang } = locals;
  
    await setLocale(lang);
    await setRoute('error');
  
    return locals;
};

My routes/layout.svelte

<script>
import { t } from '$lib/translations/index.js';
</script>
<h1>{$t('home.title')}</h1>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

No locale provided for 'home.title' key. Skipping translation... #194

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 0 comments

Select a reply

No locale provided for 'home.title' key. Skipping translation... #194

sydseter Nov 21, 2024

Replies: 0 comments

sydseter
Nov 21, 2024