Cannot set property 'subscribable' of undefined

[thgh]

This happens when referencing a non existent store. The error does not contain any sign of where it is thrown which means it takes a lot of time to fix. One workaround is to open compiler.js:22884 and add if (!variable) console.log('subscribable', name, this.file).

Error is thrown here:

svelte/src/compile/Component.ts

Line 193 in 716e0df

variable.subscribable = true;

Stack trace

Cannot set property 'subscribable' of undefined

at Component.add_reference (/Users/thomas/projects/ga/node_modules/svelte/compiler.js:22884:40) at Object.enter (/Users/thomas/projects/ga/node_modules/svelte/compiler.js:21133:36) at visit (/Users/thomas/projects/ga/node_modules/svelte/compiler.js:10204:10) at walk (/Users/thomas/projects/ga/node_modules/svelte/compiler.js:10184:3) at new Expression (/Users/thomas/projects/ga/node_modules/svelte/compiler.js:21094:10) at new EachBlock$1 (/Users/thomas/projects/ga/node_modules/svelte/compiler.js:21547:28) at children.map.child (/Users/thomas/projects/ga/node_modules/svelte/compiler.js:22695:23) at Array.map () at mapChildren (/Users/thomas/projects/ga/node_modules/svelte/compiler.js:22693:22) at new Element$1 (/Users/thomas/projects/ga/node_modules/svelte/compiler.js:21974:26)

Repro: https://v3.svelte.technology/repl?version=3.0.0-beta.8&gist=b154d4f0c5e6d1cc3a03a70a1b7d2350

Same error 2:

<h1>Hello</h1>
<script>
  function test () {
    $name = 2
  }
</script>

Same error 3:

<h1>Hello</h1>
<script>
  $name = 2
</script>

[Conduitry]

I think ideally this shouldn't throw any error at all, but should instead create a subscription to a global variable, and it should emit a compiler warning that you're referring to an undefined variable.

[btakita]

A prompt fix on this would be appreciated. When upgrading a project with many components, this makes for a frustrating needle in a haystack.

[pngwn]

@btakita What version are you currently on and what version are you trying to upgrade to? This error was actually fixed at some point and as long as your code is valid (you aren't susbcribing to undeclared variables) shouldn't be happening.

If you are trying to subscribe to a global variable then that is more of an additional feature that is currently unsupported. The error message is not very friendly right now though.

[btakita]

@pngwn I'm using the latest version. The problem is variable.subscribable = true when variable is null.

https://github.com/sveltejs/svelte/blob/master/src/compile/Component.ts#L200

https://github.com/sveltejs/svelte/blob/master/src/compile/Component.ts#L651

Right now, I go into the npm package & manually add error handling which includes the name of the variable in question.

Sorry about the late response. I just finished migrating thousands of store objects.

[btakita]

This also occurs when importing a non-existent file

https://github.com/sveltejs/svelte/blob/master/src/compile/Component.ts#L854

[Conduitry]

@btakita Do you have a small reproduction of this in the REPL?

[btakita]

@Conduitry I'm not able to reproduce this in the REPL, as it seems to give a better error message. Here is my console output.

% npm run dev                                                                                                                                                                                                        
                                                                                                                                                                                                                                                                                            
> @censible/[email protected] dev /project/path                                                                                                                                                                                                  
> sapper dev --bundler rollup                                                                                                                                                                                                                                                               
                                                                                                                                                                                                                                                                                            
✗ server
Cannot set property 'subscribable' of undefined
✗ client
Cannot set property 'subscribable' of undefined

[btakita]

It seems like the variable is being stored in var_lookup with the $ prefix key, but the lookup is occurring without the $ prefix.

I isolated the offending code to the walk_instance_js_pre_template method https://github.com/sveltejs/svelte/blob/master/src/compile/Component.ts#L650. name.slice(1) locates the store instead of the store value expression. If the store is not imported, nothing will be returned, which leads to the error Cannot set property 'subscribable' of undefined.

Removing the .slice(1) will fix the issue const variable = this.var_lookup.get(name);

[btakita]

@Conduitry Aha! I got a reproduction in the repl.

https://v3.svelte.technology/repl?version=3.0.0-beta.20&gist=7a5d2a7a1e7e661ce3f38304eed5639d

[Conduitry]

It seems that #2235 only care of instances of $undeclared_store appearing in the template and not in the script. Reopening.