"Cannot read property 'subscribe' of undefined" when store creation is delayed

[EmilTholin]

If you don't assign a store to a variable directly on initialisation you get the error "Cannot read property 'subscribe' of undefined" in [email protected].

This is a bit of a contrived example, but demonstrates the problem (REPL):

<!-- Foo.svelte -->
<script>
  import { writable } from 'svelte/store'
	
  export let prop = null
  // Assigning a store to this variable further down gives rise to error
  // "Cannot read property 'subscribe' of undefined"
  let label;
  // This works
  // let label = prop === null ? writable('Foo') : writable(prop)

  if (prop === null) {
    label = writable('Foo')
  } else {
    label = writable(prop)
  }
</script> 

<div>{$label}</div>

This worked back in beta.3.

[Conduitry]

Simpler example:

<script>
	import { writable } from 'svelte/store';
	let foo;
	foo = writable(42);
</script>

{$foo}

I'm not sure what we want to do about this. One of the several things that changed in beta 4 was to subscribe to stores right away after they're declared. This is generally useful but does result in an error in this case. If foo is not a store, should the generated $$subscribe_foo function check for that and not do anything in that case? Is that worth the bytes? Is it unreasonable to say that if someone refers to $foo anywhere in their component, that foo is assumed to always be a store?

[LaughingBubba]

Hi I'm getting the same problem but only when I run the code in https://codesandbox.io , When I run the code locally no problems. Go figure.

[hexrcs]

I ran into this issue recently and wasn't able to figure out a way to work around this. Are there any more details on why the creation is delayed (batched for performance?) or when exactly the stores are created?

Edit: in my case, I placed the stores inside a separate .js file but I think it's basically the same thing as here.

[pushkine]

Everytime I got that error the debugger pointed me to the wrong store, the real one is named on line 6 at $$subscribe_storeName

[Conduitry]

I don't remember what the autosubscription implementation looked like back when this issue was first opened, but the way it is now would actually lend itself pretty easily to supporting this.

diff --git a/src/runtime/internal/utils.ts b/src/runtime/internal/utils.ts
index c7722e1a0..4ba7e18c1 100644
--- a/src/runtime/internal/utils.ts
+++ b/src/runtime/internal/utils.ts
@@ -43,12 +43,15 @@ export function not_equal(a, b) {
 }
 
 export function validate_store(store, name) {
-	if (!store || typeof store.subscribe !== 'function') {
+	if (store != null && typeof store.subscribe !== 'function') {
 		throw new Error(`'${name}' is not a store with a 'subscribe' method`);
 	}
 }
 
 export function subscribe(store, ...callbacks) {
+	if (store == null) {
+		return noop;
+	}
 	const unsub = store.subscribe(...callbacks);
 	return unsub.unsubscribe ? () => unsub.unsubscribe() : unsub;
 }

All subscriptions now go through this one function (to massage the response from RxJS observables), so we can also use this opportunity to make subscribing to a nullish store (and unsubscribing from it later) a no-op if so desired.