Some help figuring out why +page.server.js load functions are not firing

[dimitarnikolovv]

I recently decided to localize my site using the sveltekit-i18n library, following this example. The problem is that in it the handle hook seems to mess with the load functions when redirecting using the default locale. I tried to debug the problem but my understanding of sveltekit's data loading is not on that level.

This is my version of the handle hook:

// hooks.server.js
import { defaultLocale, loadTranslations, locales } from '$lib/translations';
import { redirect } from '@sveltejs/kit';

const routeRegex = new RegExp(/^\/[^.]*([?#].*)?$/);

/** @type {import('@sveltejs/kit').Handle} */
export const handle = async ({ event, resolve }) => {
	const { url, request, isDataRequest } = event;
	const { pathname, origin } = url;

	// If this request is a route request
	if (routeRegex.test(pathname)) {
		// Get defined locales
		const supportedLocales = locales.get().map((l) => l.toLowerCase());

		// Try to get locale from `pathname`.
		let locale = supportedLocales.find(
			(l) => l === `${pathname.match(/[^/]+?(?=\/|$)/)}`.toLowerCase()
		);

		// We want to redirect the default locale to "no-locale" path
		if (locale === defaultLocale && !request.headers.get('prevent-redirect')) {
			const localeRegex = new RegExp(`^/${locale}`);
			const location = `${pathname}`.replace(localeRegex, '') || '/';

			return new Response(undefined, { headers: { location }, status: 301 });

			// If route locale is not supported
		} else if (!locale) {
			// Get user preferred locale if it's a direct navigation
			// if (!isDataRequest) {
			// 	locale =
			// 		`${`${request.headers.get('accept-language')}`.match(/[a-zA-Z]+?(?=-|_|,|;)/)}`.toLowerCase();
			// }

			// Get user preferred locale if it's a direct navigation
			if (!isDataRequest) {
				locale = event.cookies.get('locale');
			}

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

			if (locale === defaultLocale) {
				const path = `${pathname}`.replace(/\/$/, '');
				const redirectTo = `${origin}/${locale}${path}${isDataRequest ? '/__data.json?x-sveltekit-invalidated=100' : ''}`;

				// We want to prevent redirect to fetch data for the default locale
				request.headers.set('prevent-redirect', '1');

				// Fetch the redirected route
				const response = await fetch(redirectTo, request);

				// Get response body and set html headers
				const data = await response.text();

				// Serve the redirected route.
				// In this case we don't have to set the html 'lang' attribute
				// as the default locale is already included in our app.html.
				return new Response(data, {
					...response,
					headers: {
						...response.headers,
						'Content-Type': isDataRequest ? 'application/json' : 'text/html'
					}
				});
			}

			// 301 redirect

			return new Response(undefined, {
				headers: { location: `/${locale}${pathname}` },
				status: 301
			});
		}

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

	return resolve(event);
};

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

// 	await loadTranslations(lang, 'error');

// 	console.log(event);

// 	return locals;
// };

There are three locales en, bg, and pl. The idea is however when navigating using the defaultLocale (bg) to remove it from the URL. For example somesite.eu/bg/services becomes somesite.eu/services. And it works as expected, but when navigating to a page that is dependent on data provided by a load function it just won't trigger the load function. This behavior is only present when navigating using the defaultLocale. Or in other words only when the handle hook tries to redirect to a non-localized URL. For example, navigation to somesite.eu/services won't trigger the +page.server.js load function, but somesite.eu/en/services will.

For this reason, this is the route structure that the example suggests:

.
└── src/
    ├── routes/
    │   └── [...lang=locale]/
    │       ├── route1/
    │       │   ├── +page.svelte
    │       │   └── +page.server.js
    │       ├── route2/
    │       │   ├── +page.svelte
    │       │   └── +page.server.js
    │       ├── route3/
    │       │   ├── +page.svelte
    │       │   └── +page.server.js
    │       ├── +layout.js
    │       ├── +layout.server.js
    │       └── +error.svelte
    ├── app.html
    └── +hooks.server.js

// params/locale.js
import { locales } from '$lib/translations';

/** @type {import('@sveltejs/kit').ParamMatcher} */
export function match(param) {
	const definedLocales = locales.get();
	const paths = [...definedLocales, ''];
	const slashPaths = paths.map((l) => `${l}/`);

	return [...paths, ...slashPaths].includes(param);
}