Inconsistent behavior with Svelte contexts

[AnatoleLucet]

Describe the bug

While trying to migrate from Jest, I found that managing a Svelte context from outside a component seems to create some strange issues with Vitest.

First issue: Function called outside component initialization

Let's say I call Svelte's setContext in a function - let's call it initContext - and this function is defined in a .js file beside the .svelte component, if I call initContext inside my Svelte component Vitest will throw Function called outside component initialization (setContext).

According to the Svelte REPL it should work, but if you try it with Vitest, it doesn't.

Second issue: using an object defined in a .js file as context key returns an undefined context

I actually stumbled on the first issue while trying to reproduce this one. I did manage to reproduce it on Stackblitz, but suddenly out of nowhere, the first issue appeared. So I guess I won't really have a repro for this one.

Using the same Stackblitz as before, getContext in Hello.svelte returned undefined. I figured out it was due to the contextKey being an object and being defined in another file (context.ts). If I change the value of contextKey to export const contextKey = "myContext", it suddenly works perfectly (like in the Svelte REPL).
I guess Vitest is doing something with the imports which somehow redefines contextKey, thus making contextKey === contextKey false.

BTW using objects/symbols as context key is the recommended way according to the Svelte doc.

Reproduction

https://stackblitz.com/edit/github-zrwj6k-isnfa8?file=components%2Fcontext.ts

System Info

Svelte

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sheremet-va]

I'm not able to reproduce the issue on my machine. Can you provide System Info? Svelte is not enough

npx envinfo --system --npmPackages '{vitest,vite,@vitejs/*}' --binaries --browsers

[AnatoleLucet]

Sure.

  System:
    OS: Linux 5.13 Manjaro Linux
    CPU: (10) x64 AMD Ryzen 7 3800X 8-Core Processor
    Memory: 20.99 GB / 23.95 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.18.2 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.4.1 - /usr/bin/npm
  Browsers:
    Firefox: 97.0
  npmPackages:
    vite: ^2.8.4 => 2.8.4 
    vitest: ^0.4.2 => 0.4.2 

I'm also unable to reproduce the first issue on my machine. It only appends on Stackblitz.

But after a bit more digging, I found out the second issue is caused by a circular dependency.
Here's a repro (you might want to try it on your local machine, because the first issue's still hiding the second one on Stackblitz):
https://stackblitz.com/edit/github-zrwj6k-ctpic7?file=components%2Fcontext.ts
As you can see, the console.log in createSomeStuffWithMyContext logs undefined.
I also added an onMount in initContext because I found out it never fires (even on my local machine), the console.log('onMount') is never logged.

I also updated the Svelte REPL (which seems to work fine with createSomeStuffWithMyContext): https://svelte.dev/repl/410523f9fbba4ce4b6adbf7bbd0b322d?version=3.46.4

[AnatoleLucet]

Just to sum up for easier reading:

• Function called outside component initialization (only appears on stackblitz): https://stackblitz.com/edit/github-zrwj6k-ibjzfq?file=components%2Fcontext.ts
• Circular dependency makes getContext return undefined (needs to be tried on your local machine): https://stackblitz.com/edit/github-zrwj6k-ctpic7?file=components%2Fcontext.ts
• onMount called from another file doesn't seem to fire (needs to be tried on your local machine): https://stackblitz.com/edit/github-zrwj6k-jkftsn?file=components%2Fhello.ts

[sheremet-va]

I'm also unable to reproduce the first issue on my machine. It only appends on Stackblitz.

I can't reproduce the second issue with object on Node 14.17 (with npm 6) and on Node 16.13.2 (with npm 8.1.2) - it logs { foo: 'bar' }

But onMounted is not called on either of these

[userquin]

@sheremet-va it is using node 14.17 and the error on local I'm trying to reproduce

[sheremet-va]

I'm also unable to reproduce the first issue on my machine. It only appends on Stackblitz.

I can't reproduce the second issue with object on Node 14.17 (with npm 6) and on Node 16.13.2 (with npm 8.1.2) - it logs { foo: 'bar' }

But onMounted is not called on either of these

onMounted doesn't work because svelte is running in ssr mode.

[sheremet-va]

@sheremet-va it is using node 14.17 and the error on local I'm trying to reproduce

Yes, I know, that's why I tried it.

[sheremet-va]

By default we are processing .ts files with ssr flag, but .svelte files are precessed without this flag (so they are reaching to different svelte package files). @AnatoleLucet add this to test config:

    transformMode: {
      web: [/\.svelte$/, /\.[jt]s$/]
    }

[userquin]

@sheremet-va your suggestion working also with node 16.13.0 (LTS)

[AnatoleLucet]

@sheremet-va seems like the transformMode resolves both the onMount, and unefined context issues. Thanks!