SvelteKit.next Static Site Adapter Pages Return 404 on Refresh

Question

I know this can't be that hard, but Googling isn't turning up any answers. I'm using the SvelteKit static site adapter, and it's building the site, but the build file structure is:

root
  - _app
  - faviceon.png
  - index.html
  - secondpage.html

But, when you click on the navigation items to take you to the secondary page, the URL is: url.com/secondpage rather than url.com/secondpage.html. I'm assuming the generated JS is doing the routing here, but if you input the url directly or refresh the second page, it returns a 404.

I know this has to be a config issue, but I've tried tons of variations, and the build stays the same. This is my svelte.config.js file:

// import adapter from "@sveltejs/adapter-auto";
import adapter from "@sveltejs/adapter-static";
import preprocess from "svelte-preprocess";

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess({
        scss: {
            prependData: `@import './src/lib/scss/style.scss';`,
        },
    }),

    kit: {
        adapter: adapter({
            // default options are shown. On some platforms
            // these options are set automatically — see below
            pages: "build",
            assets: "build",
            fallback: null,
            precompress: false,
            trailingSlash: 'always',
        }),
    },
};

export default config;

I initially didn't have the trailingSlash param, but the few sort of related things in docs and on StackOverflow made it seem like that might affect the routing code generation.

Anyway, let me know if you need any other code samples from me, or if just not seeing the forest for the trees.

Thanks!

Answer 1

I found the same situation, I found out that I should put a line in src/routes/+layout.js

export const trailingSlash = 'always'