Store has undefined value on SSR

[ehrencrona]

The following code will print {y: "value", x: "value"} in the browser console if you run it in the REPL or on Sapper client side, but running it on the server side in Sapper will result in { y: undefined, x: 'value' }.

The difference between x and y is only the assignment to the variable happening separately from the definition.

This feels like bug because:

• it's not obvious why the store should ever be undefined if it's assigned an initial value
• i would not expect splitting variable declaration and assignment into two to make any difference in how the code executes

...but it's of course possible this is intended behavior :D In that case I'd be curious as to why this happens.

I reported it in Sapper because I can only produce the issue in Sapper, but it might be a Svelte core issue.

<script>
  import { readable } from "svelte/store";

  let x = readable('value', () => {});

  let y;
  y = readable('value', () => {});
  
  console.log({y: $y, x: $x})
</script>

Information about your Sapper Installation:

  System:
    OS: macOS 10.15.2
  Binaries:
    Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v14.4.0/bin/npm
  Browsers:
    Chrome: 88.0.4324.96
  npmPackages:
    rollup: ^2.3.4 => 2.34.2 
    sapper: ^0.28.0 => 0.28.10 
    svelte: ^3.17.3 => 3.31.0 

Severity
Moderate. I have a template looking something like

  let favorites

  $: {
    favorites = getFavoriteProducts(); /* a store */
  }

which won't work due to the above. The following does work but results in duplicate creation of the store

  let favorites = getFavoriteProducts()

  $: {
    favorites = getFavoriteProducts();
  }

($: favorites = getFavoriteProducts(); would work but I can't do that either because I get a different error if I reference it in a separate reactive block)

[furudean]

I don't believe this is a bug, and it's not unique to Sapper either. This is simply how reactivity works in Svelte.

$: only triggers an update if the parameters of getFavoriteProducts() is changed. Since your function does not take any parameters Svelte does not trigger an update, so that is why you are seeing favorites be undefined - you never defined it in the first place.

I believe what you are looking for in your case isn't to use $: but to instead use the onMount export from Svelte. This always runs when the component is created:

import { onMount } from "svelte";

let favorites;

onMount(() => {
  favorites = getFavoriteProducts();
});

[furudean]

Additionally - may I ask why you are creating the store in a reactive statement instead of immediately?

I think just this should be enough, unless you have some special requirement.

let favorites = getFavoriteProducts();

[ehrencrona]

@c-bandy Thanks for commenting. The (pseudo) code I left under "Severity" only serves to illustrate why there is a need to have the variable declaration separate from the assignment, it's not the actual issue. The actual issue is the first code block. That code does not contain any $: blocks.

And, yes, getFavoriteProducts takes parameters, I just didn't want to clutter the issue. I'm sure there are workarounds, but the the crux is: the code behaves differently on the server and on the client, which seems unlikely to be intended.

[tanhauhau]

I believe this is fixed in v3.31.2 by #5419