svelte-kit issues with SSR

Hey there! I running into some issues using Sveltekit and SSR.

SSR issues

1. Whenever I’m starting the server with npm run dev, an error occurs in the terminal:

[vite] Error when evaluating SSR module /node_modules/precompile-intl-runtime/dist/modules/stores/formatters.js:
SyntaxError: Unexpected token '||='

This even persists if I disable SSR in the svelte.config.js file. If SSR is disabled, the app seems to work even with that error.

1. Having SSR enabled using addMessages in my __layout.svelte file, devserver and build fails with this error in the terminal:

__vite_ssr_import_3__.addMessages is not a function

1. In your docs, you write type="module" but it should be context="module" to load it in the layout file. However, you cannot subscribe to a store value within a module context. So $session fails. You could only use get instead: https://github.com/sveltejs/svelte/issues/4306

2. The trick with the hook to split the “accept-language” string is not working if you build the app using static-adapter. There should be an additional check like:

let acceptedLanguage = request.headers["accept-language"] && request.headers["accept-language"].split(',')[0];`

1. If I import a JSON file like $locales/en.json Vite fails with this:

09:06:06 [vite] Internal server error: Failed to parse JSON file.

If I import it as a JS or TS file, it works. Even though it’s a JSON file. Is this expected behavior?

environment

MacOS: 10.15.7 Node: 14.18.0 NPM: 6.14.15 svelte-kit: 1.0.0-next.180 vite: 2.6.3

[kilianso]

@cibernox One more update on this.

Putting it into the regular script tag works on the development server. However, if you try to build your app using static-adapter none of the message can be found:

[svelte-i18n] The message "msg.test" was not found in "".

If you load all i18n related stuff in a context=module it works on the development server and also as a static build. But getLocaleFromNavigator does not work when placed in a context="module". It remains null even if you try to pass the session using get (since you cannot use $ in a module):

<script context="module">
  import { addMessages, init, getLocaleFromNavigator} from 'svelte-intl-precompile';
  import { session } from '$app/stores';
  import { get } from 'svelte/store';

  import en from '$locales/en.js';
  addMessages('en', en);

  init({
	fallbackLocale: 'en',
	initialLocale: getLocaleFromNavigator(get(session.acceptedLanguage))
  });
 </script>

The only solution that seems to work is loading the locales in the module but then run the init and all the session-related stuff in the regular script tag. This way, if you do a static build (or probably also with SSR) it will always take the fallback locale at first. Then, it sets the locale on the client side once the session kicks in. Like this:

<script context="module">
	import { init, getLocaleFromNavigator } from 'svelte-intl-precompile';	
	import en from '$locales/en.js';
	addMessages('en', en);
</script>
<script>
	import { addMessages } from 'svelte-intl-precompile';	
	import { session } from '$app/stores';

	init({
		fallbackLocale: 'en',
		initialLocale: getLocaleFromNavigator($session.acceptedLanguage)
	});
</script>

Not sure if this is the recommended way of doing it, but it works. ¯_(ツ)_/¯

[cibernox]

Yep, that looks correct. I tend to put as much as I can in a context="module" but in this situation you don’t seem to have access to the session in that module. I’m not exactly sure why, the hooks run before the script, but whatever the reason it’s fine to initialize the library in a regular script tag.

I updated the sample app with a code quite similar to yours.