Accessing svelte store with $ notation causing Reference Error

Question

I have a store.js file whose content is :

import { writable } from 'svelte/store';
export  const generateds = writable(0);

console.log("generateds", $generateds)

Each time I try to access $generateds (inside or outside this file) I get this error :

Uncaught ReferenceError: $generateds is not defined
    at stores.js:4
    at main.js:6

When I use a store in a new project, there is no problem. I can't find what's the problem in my current project.

Here is the list of the npm packages I'm using :

── @fortawesome/[email protected]
├── @material/[email protected]
├── @mdi/[email protected]
├── @rollup/[email protected]
├── @rollup/[email protected]
├── @smui/[email protected]
├── @smui/[email protected]
├── @smui/[email protected]
├── @smui/[email protected]
├── @smui/[email protected]
├── @smui/[email protected]
├── @smui/[email protected]
├── @smui/[email protected]
├── @smui/[email protected]
├── @sveltejs/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]

Dropsonde

Answer 1

The $ syntax to reference a store value can only be used inside a Svelte component. From the docs (emphasis mine):

Any time you have a reference to a store, you can access its value inside a component by prefixing it with the $ character. This causes Svelte to declare the prefixed variable, and set up a store subscription that will be unsubscribed when appropriate.

If you need to get the value inside a normal JS file, you can either subscribe to it or use Svelte's get function (which subscribes to the store to get the value and immediately unsubscribes).

import { generateds }  from './store.js';
import { get } from 'svelte/store';

// method 1
const unsubscribe = generateds.subscribe((val) => { console.log(val); });
unsubscribe();

// method 2
console.log(get(generateds));

Ambler

what about this then: You're not limited to using $count inside the markup, either — you can use it anywhere in the <script> as well, such as in event handlers or reactive declarations. svelte.dev/tutorial/auto-subscriptions – Bennir

<script>, event handlers, and reactive declarations are all still inside Svelte components (.svelte files). Inside a Svelte component you can use the $ syntax to auto-subscribe to the store; everywhere else (.js or .ts files) you need to manually subscribe. – Ambler

ah I see, I think I missed the fact that the OP was not inside a svelte component when I responded – Bennir

I am getting the same error but I want to set the value instead of get Is there any option or alternative to set writable store outside .svelte component ? – Eldon

Thx, important notice on the get function that it subscribes to the store to get the value and immediately unsubscribes which can break your code if you expect that it works like $subsribedVar. – Begrime

Answer 2

You can use $generateds only in .svelte components.
If you'd like to get the value of the store outside of a svelte component you can use generateds.subscribe() or get(generateds).

So you'r example can look like:

import { writable, get } from 'svelte/store';
export  const generateds = writable(0);

console.log("generateds", get(generateds))

Jeanelle

Answer 3

in my case, I had imported

import { writable } from "svelte/types/runtime/store";

instead of

import { writable } from 'svelte/store';

Mickeymicki