Adapter-static not applying CSS on index page

[universallyleo]

Describe the bug

This is what I expect:

But when I upload it to Github pages, the index page has no CSS applied to it:

The strange thing is that CSS get applies correctly on other pages, only the index page (i.e. from src/+page.svelte) has this problem. Even stranger is if I click a link to go to another page, and then click a link coming back to the index page, the CSS will be applied! You can see this on my demo pages. Can anyone explains why this is happening?

The build produce no error of course. It is the final result that is the problem.

There was no such problem before on my old project (built around the time when SvelteKit1.0 comes out). But when I update my npm packages everything breaks. So I start afresh and checked that I really doesn't show the way I expect. If any of my steps is wrong, perhaps some clarification in the documentation will be very helpful. Perhaps some clarification on the correct steps to how to update the svelte packages in the documentation will be helpful too.

Reproduction

Link to the repo containing the demo.

This is how I come to it:

1. npm create svelte@latest testapp
2. npm install
3. npm i @sveltejs/adapter-static
4. change svelte.config.js as follows

import adapter from "@sveltejs/adapter-static";

const dev = process.argv.includes("dev");

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        // 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({
            pages: "docs",
            assets: "docs",
        }),
        paths: {
            base: dev ? "" : "/testapp",
        },
    },
};

export default config;

5. Add export const prerender=true to +layout.js
6. Add +layout.svelte and style it (this is where the CSS are set).
7. Add another page about/+page.svelte to demonstrate that the CSS get applies correctly on the non-index page
8. Add a blank .nojekyll to static folder
9. npm run dev checked it is producing the result I wanted
10. npm run build to built to docs folder
11. Upload to repo to Github and have Github Page points to docs
    
12. Check result on Github pages

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
    Memory: 2.93 GB / 15.81 GB
  Binaries:
    Node: 18.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.4.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 111.0.5563.64
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.63)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.0.0
    @sveltejs/adapter-static: ^2.0.1 => 2.0.1
    @sveltejs/kit: ^1.5.0 => 1.11.0
    svelte: ^3.54.0 => 3.56.0
    vite: ^4.0.0 => 4.1.4

Severity

annoyance

Additional Information

No response

[teemingc]

The missing CSS in the index page is because the linked stylesheet is being set to the wrong path during build.
It expects the index page to be served from /testapp but the site serves it at /testapp/

kit/packages/kit/src/runtime/server/page/render.js

Line 98 in 29ffc78

const segments = event.url.pathname.slice(paths.base.length).split('/');

<!-- This results in /testapp/testapp/_app instead of /testapp/_app. -->
<link href="./testapp/_app/immutable/assets/_layout.a467127a.css" rel="stylesheet">
<!--  It should be "./_app" which is correctly done in the about.html page -->

One workaround in the meantime would be to set relative paths to false in svelte.config.js.

        paths: {
            base: dev ? "" : "/testapp",
+           relative: false
        },

<!-- always results in /testapp/_app -->
<link href="/testapp/_app/immutable/assets/_layout.a467127a.css" rel="stylesheet">

Alternatively, you can add the export const trailingSlash: 'always' option for your index page.
This would align the URL with your github pages site.

// src/routes/+page.js
export const trailingSlash = 'always';

With that said, I'm not sure if this is a bug or if the responsibility belongs to the user to set trailingSlash when working with GitHub pages. Does it always use a trailing slash for the index url?

[universallyleo]

Thank you very much. This does fix the issue.
I agree this is not really a bug, but it is impossible to find out from the documentation.

The comment on trailingSlash in the documentation says "does not render", but in my case it is rendering - just that without CSS - and it only happens to a single page, and so I never thought about that. After all I follow exactly the instruction under the Github Page section. More clarity in the documentation would be great. Hope someone in the svelte team will notice this.

[danyelkoca]

Hi,

Im having the same issue when hosting a svelte project on gh-pages.

Im hosting the app on username.github.io/<repo_name> where repo_name is "permanent"

I have done below in order to change the base of the app so that routing between pages work fine:

I have 3 pages: Index, about, form

After building the app, css & js links are referenced from permanent folder in index.html

While other pages (form, about) go directly to _app

While other pages are referring to the correct location of these files, index page is looking for permanent folder, which does not exist in the build folder:

So this is causing an absence of css and js files on the index page. Interestingly, this happens only when the user lands in index. When I go back to index from another page in the app, js and css files are correctly referenced in the index page and the page is correctly rendered.

I have tried adding relative: false in the svelte.config,js but it changes all references to ./permanent/_app on all pages, which is the incorrect location.

One workaround would be to use relative: false and then move the _app folder under a new folder called permanent after build. This doesnt sound right though.

Any advice on how to fix this wrong reference issue on index.html?

Index page with broken rendering: https://danyelkoca.github.io/permanent
A page of the app that works correctly: https://danyelkoca.github.io/permanent/form

[teemingc]

I have tried adding relative: false in the svelte.config,js but it changes all references to ./permanent/_app on all pages, which is the incorrect location.

It should be referencing /permanent/_app when setting relative: false. Can you provide a repository that reproduces this? Accessing /permanent/_app from the base of https://danyelkoca.github.io/ should result in the correct filepath when navigating to https://danyelkoca.github.io/permanent

Any advice on how to fix this wrong reference issue on index.html?

Alternatively, you can add the export const trailingSlash: 'always' option for your index page.
This would align the URL with your github pages site.

// src/routes/+page.js
export const trailingSlash = 'always';

[danyelkoca]

Thanks for the response.

relative: false was not solving the issue yesterday (I guess I had forgotten to add .nojekyll in the GitHub repo, which caused the rendering issue)

But now, as you mentioned, all the references are changed to /permanent/... so it's working fine with the addition of relative: false.

Thanks for the help!

[teemingc]

I can no longer reproduce this issue. Assets are correctly linked in the root index.html page such as <link href="./_app/immutable/assets/0.fa9427ff.css" rel="stylesheet"> even with the base path config set.

related to #9341
fixed by #9343