Bug: Routes hanging on dev server

[gyenabubakar]

I have a bug where some routes hang, sometimes indefinitely. I've tried re-running dev, removing node_modules/ and .svelte-kit/, clearing browser cache, etc., but the problem persists.

If anyone would like to help, here's how to reproduce:

1. Clone the code: https://github.com/gyenabubakar/survie-app.git
2. Install the packages — npm i.
3. Start the dev server — npm run dev. IMPORTANT: Don't open the URL in the browser just yet.
4. Try opening these routes:
   —— http://localhost:5173/app/onboarding
   —— http://localhost:5173/app/onboarding/profile

These routes keep hanging. And when they randomly load fine, clicking on the "upload image" doesn't pop up the file selection dialogue. However, when I build the app (npm run build) and preview (npm run preview), these routes work fine (now on port 4173).

I posted this issue in the Svelte server on Discord. You can read the discussion here.

[gyenabubakar]

UPDATE:

1. I added a src/hooks.server.ts file and it invokes the console.log() that I put in the handle hook. I also put a load function in the src/routes/app/onboarding/+page.server.ts file and its console.log() is also invoked. So, SvelteKit is actually receiving the requests, but is failing to respond.

2. I found a workaround for this: disabling SSR for the /app/onboarding/** routes during development:

// 📁 src/routes/app/onboarding/+layout.ts
export const ssr = process.env['NODE_ENV'] === 'production';

With this, I have to reload the page 2x or 3x before the page is rendered, and this means I have to build for production locally if I want to test SSR behaviour. Not ideal! Really hope to find a better solution for this.

[gyenabubakar]

UPDATE:

1. This seems to be a known issue and has been solved in this PR which is yet to merged. So, I've resorted to cloning that fork of Vite and linking it locally.

2. I'm now automating the linking steps:

📁 clone-vite.sh:

ROOT_DIR=$(pwd)

rm -rf .git-cloned/vite
git clone https://github.com/shYkiSto/vite.git .git-cloned/vite # added `.git-cloned` to `.gitignore`

# shellcheck disable=SC2164
cd .git-cloned/vite

git switch fix-ssr-deadlock
pnpm install --reporter=silent
pnpm run build
cd packages/vite && npm link

# go back to the root of the project
cd "$ROOT_DIR" || exit

# replace all occurrences of `link:` with `file:` in the packages/vite/package.json files
bun use-file-protocol-in-vite.ts

npm link vite

📁 use-file-protocol-in-vite.ts:

import { readFileSync, writeFileSync } from 'node:fs';

const packageJsonPath = '.git-cloned/vite/packages/vite/package.json';
const packageJson = readFileSync(packageJsonPath, 'utf-8').replaceAll(/link:/g, 'file:');

writeFileSync(packageJsonPath, packageJson);

In my package.json, I have the "prepare" script as follows:

husky && chmod u+x clone-vite.sh && ./clone-vite.sh