Cannot access to my Svelte component name on Gitlab Pages

Question

I'm doing a SPA in Svelte. It works locally and on Svelte REPL where the component inside the condition is shown but not when I deploy to Gitlab Pages.

  # .gitlab-ci.yml
  script:
    - npm install
    - npm run build

In my App.svelte I use a svelte:component to always render the current $screen and only the footer component if the screen is Payments

<script>
    import { screen } from '../store.js' // current screen: Login, Profile, etc
    import Login from './Login.svelte'
    import Menu from '../components/Menu.svelte'

    // Screens with Menu
    const screens_menu = ['Payments']

    // Default screen
    $screen = Login
</script>

<main>
    <svelte:component this={$screen} />
    {#if screens_menu.includes($screen.name)}
        <footer><Menu /></footer>
    {/if}
</main>

In my store.js I have this

import { writable } from 'svelte/store'
// Current Screen
export let screen = writable(null)

Check same example

Working on Svelte REPL.

Note

If I use the component screen itself instead of the variable name everything works as expected but now (probably) I'm overloading (importing all the screens). Now, it's only Payments but it could be more screens.

<script>
    import { screen } from '../store.js'
    import Payments from './Payments.svelte'
    import Menu from '../components/Menu.svelte'
    
    // Screens with Menu
    const screens_menu = [Payments]
    // ...
</script>

<main>
    <svelte:component this={$screen} />
    {#if screens_menu.includes($screen)}
        <footer><Menu /></footer>
    {/if}
</main>

Do I need to configure anything extra, anyone experimenting something similiar after deployment?

Any help will be really appreciated :)

Answer 1

If your store is defined as writable(null), it seems expected to me that you have to guard against the condition where the store's value is null.

Said otherwise, you should probably write your condition like such:

    {#if $screen && screens_menu.includes($screen.name)}
        <footer><Menu /></footer>
    {/if}

Answer 2

$screen.name after deployment has changed because of the internal refactoring (bundling). Therefore the condition is never met and the Menu never shown.

Relying on a function's name in any app - Svelte or not - is a bad idea because can be affected by bundling.

Finally, as proposed in my question, I'm using the components instead of the names. Maybe thanks to tree-shaking there is no overloading.