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]

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));

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))