Svelte 4 Route Not Found After Refreshing the Page on Production Mode

Question

I'm trying out a frontend framework Svelte 4 on my local machine using Ubuntu 20.04.

I have a critical problem: when I run in development mode (npm run dev) and navigate to the route /quote/1, refreshing the page works normally. However, when I run in production mode (npm run build) and navigate to /quote/1, I encounter a '500 | Page Not Found' error when I refresh the page. Here is the directory structure of my project in the 'src' folder.

── src
│   ├── app.html
│   ├── lib
│   │   └── images
│   │       ├── github.svg
│   │       ├── heleft.me.png:Zone.Identifier
│   │       ├── svelte-logo.svg
│   │       ├── svelte-welcome.png
│   │       └── svelte-welcome.webp
│   ├── routes
│   │   ├── +layout.svelte
│   │   ├── +layout.svelte.old
│   │   ├── +page.js
│   │   ├── +page.svelte
│   │   ├── Counter.svelte
│   │   ├── Footer.svelte
│   │   ├── Header.svelte
│   │   ├── about
│   │   │   ├── +page.js
│   │   │   └── +page.svelte
│   │   ├── quote
│   │   │   └── [slug]
│   │   │       ├── +layout.svelte
│   │   │       ├── +page.js
│   │   │       └── +page.svelte
│   │   └── styles.css
│   ├── stores
│   │   └── store.js
│   └── utils
│       └── document.js

and this is my svelte.config.js

import adapter from '@sveltejs/adapter-auto';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        // paths: {
        //  base: '/var/www/html/webapp', // Example base path
        // },
        adapter: adapter({
            pages: 'build',
            assets: 'build',
            fallback: 'index.html',
            precompress: false,
        }),
        prerender: {
            entries: ['/', '/quote/[slug]', '/about'],
            // Configure how to handle missing IDs
            handleMissingId: 'ignore', // or 'fail', 'warn', etc.
        },
        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: adapter()
    }
};

export default config;

I assume there is something wrong when I run npm run build because I received a warning message. Anyone can help me out?

Run npm run preview to preview your production build locally.

Using @sveltejs/adapter-auto Could not detect a supported production environment. See https://kit.svelte.dev/docs/adapters to learn how to configure your app to run on the platform of your choosing ✔ done ✓ built in 2.26s

Answer 1

I just realized that there are some default comments in the file addressing this issue.

Navigate to the dynamic route file at /quote/[slug]/+page.js, and change the line from export const prerender = true; to export const prerender = false;