v4.9 broke accessing stores with $ prefix when imported in module context

[ghost]

Hey, everywhere in my code where I access store values using the $ prefix now cause an is not defined error similar to #396.

I'm using "svelte-preprocess": "^4.9.2" and "typescript": "^4.4.2".

I have to set the svelte-preprocess version back to 4.8.0 to fix it.

[dummdidumm]

Could you provide a minimum reproducible / code snippet ?

[ghost]

I'm using SvelteKit v1.0.0-next.164:

<script lang="ts">
  import { session, signOut } from "$lib/session"
</script>

{#if $session}
  <button on:click|once={signOut}>Sair</button>
{:else}
  <a href="/entrar">Entrar</a>
{/if}

session is a custom store actually:

import { writable } from "svelte/store"

export function createLocalStorage(key: string) {
  const { subscribe, set } = writable<string | null>(
    localStorage.getItem(key),
    (set) => {
      function handleStorageEvent(event: StorageEvent) {
        if (event.key === key) {
          set(event.newValue)
        }
      }
      window.addEventListener("storage", handleStorageEvent)
      return () => window.removeEventListener("storage", handleStorageEvent)
    }
  )

  return {
    subscribe,
    set: (value: string | null) => {
      set(value)
      if (value) {
        localStorage.setItem(key, value)
      } else {
        localStorage.removeItem(key)
      }
    },
    get: () => localStorage.getItem(key)
  }
}

export const session = createLocalStorage("session")

[dummdidumm]

Given your code snippet and using the latest version of SvelteKit I'm unable to reproduce this (I added signOut to your code snippet because it was missing).

[ghost]

Ah I think I found the actual issue. You need to import the store in a context="module" script.
Try changing <script lang="ts"> to <script lang="ts" context="module">.

I'm sorry for this sloppy bug report, I was in a hurry and assumed any code snippet containing the store would do.

[dummdidumm]

Still can't reproduce it. I addded context="module" and the code compiles and works.

[janaz]

I came across the same issue. This is how I import and use the store in my page component in sapper

<script lang="ts" context="module">
import store from "./store"
</script>

<script lang="ts">
// using $store here causes the error "ReferenceError: store is not defined"
console.log($store)
</script>

[ghost]

❌ When I add context="module" I get an error:

<script lang="ts" context="module">
  import { session, signOut } from "$lib/session"
</script>

{#if $session}
  <button on:click|once={signOut}>Sair</button>
{:else}
  <a href="/entrar">Entrar</a>
{/if}

✔️ If I use the store in the component script everything works:

<script lang="ts" context="module">
  import { session, signOut } from "$lib/session"
</script>

<script lang="ts">
  console.log($session)
</script>

{#if $session}
  <button on:click|once={signOut}>Sair</button>
{:else}
  <a href="/entrar">Entrar</a>
{/if}

❌ But then if I don't use the store in the template, I get an error:

<script lang="ts" context="module">
  import { session } from "$lib/session"
</script>

<script lang="ts">
  console.log($session)
</script>

<div>Some template</div>

✔️ Finally if I move the import to the component script it works again:

<script lang="ts">
  import { session } from "$lib/session"
  console.log($session)
</script>

<div>Some template</div>

[dummdidumm]

Thanks, can reproduce this now. The error occurs when there's a $store subscription where store is imported in the module script.

The IDE error of the first error case is unrelated to this, I'll look into this in the context of language-tools.