issue with new sveltekit version

[DAHNEEV]

After the changes (https://github.com/sveltejs/kit/discussions/5774) I get the error:

"[i18n]: No translation key or locale provided. Skipping translation...",

in the browser console also:

<Layout> was created with unknown prop 'data' +layout.svelte:94:92 <Error> was created with unknown prop 'data' error.svelte:244:92 <Error> was created with unknown prop 'errors'"

ps. I am using an example that I have adapted to the new version (https://github.com/sveltekit-i18n/lib/tree/master/examples/locale-router)

[MarcGodard]

I can confirm

[bitdom8]

Using the new sveltekit, it's all gone now https://github.com/sveltekit-i18n/lib/blob/master/examples/locale-router/src/hooks.js#L31-L35.

Hook not refers to router/[lang]

[ulvidamirli]

I have the same problem. App doesn't load any translation text. Is there any solution?

[VolkerSchiewe]

I found a way to get it working again:

• Create a layout.server.ts file: This contains contains logic to get the language of the user (e.g. by looking at accept-language header or cookies). You can access cookies and headers from the event parameter that is passed into the load function in that file. At the end you need to return the language: return { language: language }
• Create a layout.ts file: You can get the language that was returned in the server load function from event.data.language. Use that to call the loadTranslations function from sveltekit-i18n
• Done 🎉

Hope that helps somebody. I'm not 100% if this is a recommend variant on how to use sveltekit without sessions, but it works for me.

[benjaminlewandowski]

@VolkerSchiewe could you create an example repo that shows that workflow?

[jarda-svoboda]

@VolkerSchiewe or preferably a PR for some of examples?.)

[frck006]

@VolkerSchiewe Can you show us your files "layout.server.ts" and "layout.ts", please ?

Something like code below ?:

// /src/routes/+layout.ts
import { locale, loadTranslations } from '$lib/translations'

/** @type {import('./$types').LayoutLoad} */
export async function load({ url }) {
  const { pathname } = url

  const defaultLocale = 'fr' // get from cookie / user session etc...

  const initLocale = locale.get() || defaultLocale

  await loadTranslations(initLocale, pathname) 

  return {
    // Nothing to return.
  };
}

[jonsaw]

I tweaked my code based on the comments here. The translations will load, but as soon as the app mounts, the translations disappear (see attached video).

https://user-images.githubusercontent.com/1572333/190161441-9b9c16c7-bba1-4526-bd2f-c136678fefc6.mov

The only way I can get around this is to reload the translations again on mount in +layout.svelte.

	onMount(() => {
		// FIXME: issue with i18n not loading properly on the frontend
		if (browser) {
			locale.set(getDocumentCookieObject()['language'] || 'en');
		}
	});

and comment out any scoped translations:

		{
			locale: 'en',
			key: 'login',
			// FIXME: issue with i18n not loading in frontend
			// routes: ['/login', '/signout'],
			loader: async () => (await import('./en/login.json')).default
		},
		{
			locale: 'ms',
			key: 'login',
			// FIXME: issue with i18n not loading in frontend
			// routes: ['/login', '/signout'],
			loader: async () => (await import('./ms/login.json')).default
		},

[jonsaw]

Ignore my previous comment. I managed to get it to work. Example here.

Notable files to look at:

• hooks.server.ts
• +layout.ts (instead of +layout.server.ts)

[azzamsa]

Ignore my previous comment. I managed to get it to work. Example here.

Notable files to look at:

* [hooks.server.ts](https://github.com/jonsaw/sveltekit-i18n-example/blob/main/src/hooks.server.ts)

* [+layout.ts](https://github.com/jonsaw/sveltekit-i18n-example/blob/main/src/routes/%2Blayout.ts) (instead of +layout.server.ts)

Worked like a charm! :tada:. Thanks. Saved my day.

[stinger5]

Is there any chance to get a working example for the locale-router-static with just js and without ts? I tried to fix it like @VolkerSchiewe described, but it does not work. :(

[jonbitgood]

Is there any chance to get a working example for the locale-router-static with just js and without ts? I tried to fix it like @VolkerSchiewe described, but it does not work. :(

Sure, here's a sample repo using the static adapter and sveltekit-i18n library. Using a local store to keep track of the users locale preference.

https://github.com/jonbitgood/Sample-Static-Sveltekit-i18n

[robots4life]

I'd love to see a detailed example for locale-router. :heart:

[b-d-m-p]

Is there any chance to get a working example for the locale-router-static with just js and without ts? I tried to fix it like @VolkerSchiewe described, but it does not work. :(

Sure, here's a sample repo using the static adapter and sveltekit-i18n library. Using a local store to keep track of the users locale preference.

https://github.com/jonbitgood/Sample-Static-Sveltekit-i18n

I have the same set up as @stinger5 (locale-router-static with JS not TS), and I'm trying to user your example repo (thanks so much), but it looks so different from the main example repo (below) that I am having trouble making things work. Any suggestions?

https://github.com/sveltekit-i18n/lib/tree/master/examples/locale-router-static

[b-d-m-p]

Ignore my previous comment. I managed to get it to work. Example here.

Notable files to look at:

* [hooks.server.ts](https://github.com/jonsaw/sveltekit-i18n-example/blob/main/src/hooks.server.ts)

* [+layout.ts](https://github.com/jonsaw/sveltekit-i18n-example/blob/main/src/routes/%2Blayout.ts) (instead of +layout.server.ts)

@stinger5 I have the same setup as you (locale-router-static with JS not TS). I was able to get translations to appear by adding the content from these two files to mine. Add what is in hooks.server.ts to your file (remove the ts stuff), then add everything in +layout.ts to +layout.js (remove the ts stuff).

Thanks @jonsaw!

EDIT: You also need to change $: ({ route } = $page.stuff); to $: route = $page.stuff; in the +page.svelte file.

EDIT: Kinda spoke too soon... the English displays now, but when changing the paths, the language stays in En and doesn't change to the other languages, so there is still work to do.

[cupcakearmy]

Ignore my previous comment. I managed to get it to work. Example here.

Notable files to look at:

* [hooks.server.ts](https://github.com/jonsaw/sveltekit-i18n-example/blob/main/src/hooks.server.ts)

* [+layout.ts](https://github.com/jonsaw/sveltekit-i18n-example/blob/main/src/routes/%2Blayout.ts) (instead of +layout.server.ts)

Thanks! That worked like a charm!

[jarda-svoboda]

All examples have been updated to the latest version of SvelteKit so I’m closing this issue.