Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why does svelteKit/Node only load js and other assets on the homepage?

It seems the build of my sveltekit site on a nodejs server will load all assets when on the homepage, and carries them to pages, but loading directly onto a page will not load the proper resources.

Properly Loaded Page
Once on the homepage, all assets are loaded, and the site acts properly. The assets stay loaded navigating from page to page, but refeshing or just directly following a url breaks this.

Site with no assets
If the page is refreshed while not on the homepage, none of the assets seen in inspect have loaded, and the onMount JS function did not run and load the header properly.

I have made sure all node modules are up to date, and I am running Node 20.12. However I have little experience with svelte sveltekit and node. Any thoughts on what I need to do to fix this?

Here is the empty/broken page header:

    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="./favicon.png" />
        <script src="https://kit.fontawesome.com/89d8f38984.js" crossorigin="anonymous"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <link href="./_app/immutable/assets/0.CgVQ2S1-.css" rel="stylesheet"><title>Outreach</title><!-- HEAD_svelte-12kwvgb_START --><meta name="description" content="The outreach events of the UA Nasa Robotics Mining Team. Helping and teaching out in the community of Akron"><meta name="keywords" content="NASA, Robotic Mining Competition, Lunabotics, Artemis, Moon to Mars, outreach, community, events, help, teach, volunteer"><meta name="author" content="uA NASA Robotic Mining Competition Team"><!-- HEAD_svelte-12kwvgb_END -->
    </head>

Note there is no link pre-load module links, where a properly loaded page is this:

    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="./favicon.png" />
        <script src="https://kit.fontawesome.com/89d8f38984.js" crossorigin="anonymous"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <link href="./_app/immutable/assets/0.CgVQ2S1-.css" rel="stylesheet">
        <link href="./_app/immutable/assets/2.I7UnUOAp.css" rel="stylesheet">
        <link rel="modulepreload" href="./_app/immutable/entry/start.C5jAzutL.js">
        <link rel="modulepreload" href="./_app/immutable/chunks/entry.CM5QWRvp.js">
        <link rel="modulepreload" href="./_app/immutable/chunks/scheduler.DZldofIX.js">
        <link rel="modulepreload" href="./_app/immutable/entry/app.KINXI3QZ.js">
        <link rel="modulepreload" href="./_app/immutable/chunks/index.BGW6N4qv.js">
        <link rel="modulepreload" href="./_app/immutable/nodes/0.Bdfgo2Gn.js">
        <link rel="modulepreload" href="./_app/immutable/chunks/each.D6YF6ztN.js">
        <link rel="modulepreload" href="./_app/immutable/chunks/stores.BXLrAGVc.js">
        <link rel="modulepreload" href="./_app/immutable/chunks/Logo.CbnnVDWC.js">
        <link rel="modulepreload" href="./_app/immutable/nodes/2.D7JicPhI.js"><title>Home</title><!-- HEAD_svelte-ck10j9_START --><meta name="description" content="UA Nasa Robotic Mining Competition Team, University of Akron Design Team"><meta name="keywords" content="NASA, Robotic Mining Competition, Lunabotics, Artemis, Moon to Mars, design team"><meta name="author" content="UA NASA Robotic Mining Competition Team"><!-- HEAD_svelte-ck10j9_END -->
    </head>

These examples are two different pages, but ignore that. It acts this way for all pages.
This occurs between different versions of svelte too. I tried back reverting to older versions just in case.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I've found the answer. Each route has a page.js that defines some properties for it, including whether it should be served as a static page, and wether it should be served with our without js as a simplification step, known as client-side rendering. I just enabled this csr value on every page.


  2. 0

    If I’m not mistaking, you are loading assets using relative URLs, e.g. ./favicon.png. This is relative to the current URL. So on the homepage (/), this will try to load /favicon.png, and on a sub-page, e.g. /hello/, this will try to load /hello/favicon.png.

    You should load assets like this one using absolute URLs (e.g. /favicon.png) instead of a relative URLs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search