javascript - sveltekit adds new page on top of old one - Stack Overflow

admin管理员组

文章数量:1315079

I just got a really unexpected bug in my sveltekit application and I can't find anything online talking about it

I have a normal sveltekit application but instead of hydrating the new code when navigating to a new page, it just adds the new code on top of the old one, when i refresh the page it removes the old code (from the previous page)

Edit: after a little bit more exploring I realized it only happens on one page, what part of my code could make this happen?

I just got a really unexpected bug in my sveltekit application and I can't find anything online talking about it

I have a normal sveltekit application but instead of hydrating the new code when navigating to a new page, it just adds the new code on top of the old one, when i refresh the page it removes the old code (from the previous page)

Edit: after a little bit more exploring I realized it only happens on one page, what part of my code could make this happen?

• javascript
• svelte
• sveltekit

Share Improve this question Follow edited Nov 26, 2021 at 19:35 Marco Bonelli 69.5k2121 gold badges126126 silver badges145145 bronze badges asked Nov 21, 2021 at 0:45 isaac finkelsteinisaac finkelstein 39833 silver badges1313 bronze badges 3

• Could you show us your code, please? – Deotyma Commented Nov 21, 2021 at 9:58
• İt happens with me [_id]/[_id] like routes when page routeing sometimes. But can't really replicate it – Bitdom8 Commented Jan 20, 2022 at 22:29
• I have the same problem. Have created another question here – HGLR Commented Jul 10, 2023 at 13:20

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I had the same issue when having a page loading indicator on SvelteKit for internal navigating. Any page DOM modification, to display the loading indicator during the page navigating, caused the paged appearing twice error. The workaround was to not modify the page during the navigating and use only CSS to display, animate and hide the loading indicator.

Here is my loading indicator code and Here is my documentation regarding the issue. I am not sure if this an internal bug in SvelteKit, so I did not file any bug reports, as I do not have a clean repeatable example. You can also see the fixed page loading indicator on the action on this page if you click any of the blockchains.

<script>
    /**
     * Svelte does not give a load indication if you hit a link that leads to a page with slow load() function.
     * Svelte uses internal router, not server-side loading.
     * Thus, we need to manually give some indication in the user interface if the loading takes more than a blink of an eye.
     *
     * The ponent is originally made for https://tradingstrategy.ai
     *
     * Based on the original implementation https://github./shajidhasan/sveltekit-page-progress-demo by Shajid Hasan.
     *
     * As this ponent is absolutely position, you can put it at any part of your __layout.svelte.
     */
    import { onDestroy, onMount } from 'svelte';
    import { writable } from 'svelte/store';
    import { tweened } from 'svelte/motion';
    import { cubicOut } from 'svelte/easing';

    const navigationState = writable();

    const progress = tweened(0, {
        duration: 3500,
        easing: cubicOut
    });

    const unsubscribe = navigationState.subscribe((state) => {

        // You will always get state=undefined
        // event on the server-side rendering, so
        // safely ignore it
        //console.log("The loading state is", state);

        if (state === 'loading-with-progress-bar') {
            progress.set(0, { duration: 0 });
            progress.set(0.8, { duration: 5000 });
        } else if (state === 'loaded') {
            progress.set(1, { duration: 1000 });
        }
    });

    onMount(() => {
        // progress.set(0.7);
    });
    onDestroy(() => {
        unsubscribe();
    });
</script>

<!-- See the (little) documentation of special SvelteKit events here https://kit.svelte.dev/docs#events -->
<svelte:window
    on:sveltekit:navigation-start={() => {

        // If the page loads fast enough in the preloading state,
        // never display the progress bar
        $navigationState = 'preloading';

        // Delay the progress bar to bee visible an eyeblink... only show if the page load takes too long
        setTimeout(function() {
            // After 250ms switch preloading to loading-with-progress-bar
            if($navigationState === 'preloading') {
                $navigationState = 'loading-with-progress-bar';
            }
        }, 500);
    }}
    on:sveltekit:navigation-end={() => {
        $navigationState = 'loaded';
    }}
/>

<!--
    Make sure the container ponent is always in the DOM structure.

    If we make changes to the page structure during the navigation, we get a page double render error:
    https://stackoverflow./questions/70051025/sveltekit-adds-new-page-on-top-of-old-one

    Not sure if this is a bug or a feature.
    Thus, make sure any progress animation is done using CSS only.
-->
<div class="page-progress-bar" class:loaded={$navigationState === 'loaded'} class:preloading={$navigationState === 'preloading'} class:loading={$navigationState === 'loading-with-progress-bar'}>
    <div class="progress-sliver" style={`--width: ${$progress * 100}%`} />
</div>

<style>
     /* Always stay fixed at the top, but stay transparent if no activity is going on */
    .page-progress-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 0.5rem;
        background: transparent;
        z-index: 100;
        opacity: 0;
        transition: opacity 0.5s;
    }

     /* After transitioning from preloading to loading state, make the progress bar visible with CSS transition on opacity */
    .page-progress-bar.loading {
        opacity: 1;
        transition: opacity 0.5s;
    }

    .progress-sliver {
        width: var(--width);
        background-color: var(--price-up-green);
        height: 100%;
    }
</style>

I also saw this issue with the transition directive. The new page loads while the exit animation is playing. I used local transitions to solve this.

https://svelte.dev/tutorial/local-transitions

I had the same issue trying to implement an auth ponent. I figured out a workaround, and that was to add out:fade={{duration:0}} in the ponent. I found that this happens mostly on pages with many {#if} blocks, but this isn't always the case. Here is an example of how I implemented the fix. Please note, I am using Fireabse, so you may have to adapt this.

Auth.svelte

    <script lang="ts">
        import { onAuthStateChanged, getAuth } from "firebase/auth";
        import { fade } from "svelte/transition";
        import { getApp } from "$lib/firebase";
        import { onMount } from "svelte";
        import { goto } from "svelte/navigation";

        const auth = getAuth(getApp());
        let isLoggedIn = false;
        let isLoading = true;
    
        onMount(()=>{
            isLoading = false;
            return onAuthStateChanged(auth, (user)=>{
                isLoggedIn = !!user;
                // or whatever your login page is
                if (!isLoggedIn) goto("/login")
            });
        });
    </script>
    {#if isLoggedIn && !isLoading}
       <div out:fade={{duration:0}}>
            <slot></slot>
        </div>
    {:else if isLoading && !isLoggedIn}
        <div></div>
    {/if}

本文标签： javascriptsveltekit adds new page on top of old oneStack Overflow