SvelteKit hosted on Cloudflare Pages - refresh in SPA return error 500

Developers Cloudflare Pages
1

For Workes & Pages, what is the name of the domain?

What is the issue or error you’re encountering

When attempting to directly access the /library route (e.g., https://bewmn-fe.pages.dev/library), the page fails to load and returns a 500 error. The same issue is after refresh page. However, navigating to this page through the SPA works correctly.

2

For more context:
The library page is different from other pages in that it is the only one that fetches data from our backend via a REST API. However, we do not have this problem when the frontend is running locally and connected to the same backend.

Console Logging and Debugging:

  • Extensive console logging has been implemented in both server and client-side scripts to trace the issue. Despite this, the logs indicate that the problem occurs before the data fetching logic (+page.server.ts) is executed. For instance, log statements placed at the beginning of the load function in +page.server.ts for the /library route do not appear in the console.

File Structure and Configuration:

  • The file structure and configurations have been verified multiple times. The +layout.svelte and +page.svelte files are correctly placed and function as expected in other routes.
  • Static assets are correctly uploaded and available.
src/routes/
├── +layout.svelte
├── (protected)
│   ├── +layout.svelte
│   ├── library
│   │   ├── components
│   │   │   ├── ...
│   │   ├── constnants.ts
│   │   ├── +page.server.ts
│   │   ├── +page.svelte
│   │   └── [slug]
│   │       ├── components
│   │       │   ├── ...
│   │       ├── +page.server.ts
│   │       └── +page.svelte
│   ├── my-day
│   │   └── +page.svelte
│   ├── plan
│   │   └── +page.svelte
│   └── profile
│       └── +page.svelte
└── (public)
    ├── +layout.svelte
    └── +page.svelte

Source codes:
svelte.config.js

import adapter from '@sveltejs/adapter-cloudflare';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),

	kit: {
		alias: {
			'@/*': './src/*'
		},
		adapter: adapter({
			fallback: 'index.html'
		})
	}
};

export default config;

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
	plugins: [
		sveltekit()
	],
	build: {
		outDir: '.svelte-kit/cloudflare'
	},
	test: {
		include: ['src/**/*.{test,spec}.{js,ts}']
	}
});
  • Behavior in Local Development:
  • In local development, the application works perfectly. Both direct navigation and SPA navigation function without issues.

Many thanks for any tips or suggestions.