Error with: __vite_ssr_import_meta__.hot.acceptExports when running vitest tests through @testing-library/svelte

[Hugos68]

Describe the bug

I honestly don't have much knowledge about vite's internals or even public API. I just know that when using @sveltejs/vite-plugin-svelte@4.0.0-next.1 my tests started breaking.

Reproduction URL

https://github.com/Hugos68/vite-plugin-svelte-accepts-exports-repro

Reproduction

See README of the reproduction repository

Logs

> vite-plugin-svelte-accepts-exports-repro@0.0.1 test
> vitest run


 RUN  v1.6.0 C:/Users/hugok/Documents/Personal/vite-plugin-svelte-accepts-exports-repro

 ❯ src/index.test.js (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/index.test.js [ src/index.test.js ]
TypeError: __vite_ssr_import_meta__.hot.acceptExports is not a function
 ❯ src/Component.svelte:32:19
      1| <p data-testid="hello-world">Hello, World!</p>
       |                                              ^
 ❯ src/index.test.js:2:31

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

 Test Files  1 failed (1)
      Tests  no tests
   Start at  14:01:05
   Duration  1.08s (transform 230ms, setup 0ms, collect 0ms, tests 0ms, environment 413ms, prepare 91ms)

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 AMD Ryzen 5 5600 6-Core Processor
    Memory: 21.02 GB / 31.93 GB
  Binaries:
    Node: 20.11.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.1.0 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    @sveltejs/adapter-auto: ^3.0.0 => 3.2.0
    @sveltejs/kit: ^2.0.0 => 2.5.8
    @sveltejs/package: ^2.0.0 => 2.3.1
    @sveltejs/vite-plugin-svelte: ^4.0.0-next.1 => 4.0.0-next.1
    svelte: ^5.0.0-next.1 => 5.0.0-next.133
    vite: ^5.0.11 => 5.2.11

[dominikg]

came up in this discord thread https://discord.com/channels/457912077277855764/1240267908744220743

might have to do with vitest and ssr mode by default, see vitest-dev/vitest#2834

leaving this as info here for now, we might need a different way to tackle this dilemma in svelte5

[dominikg]

one way could be for vite-plugin-svelte to check process.env.VITEST and then compile components for the client even when ssr is true 🤔

one problem that still would remain is resolve conditions. we need to resolve svelte itself with the browser condition too so adding that in the config hook would be one way. But this could break tests that actually test something in .server.ts files that relies on some node only package that doesn't work with that ...

ugh. Last idea for now is either checking the importer if it is a vitest spec/test and only then explicitly compile for client, or have a query param that allows users to do import Button from './Button.svelte?client' in their component tests

[Hugos68]

or have a query param that allows users to do import Button from './Button.svelte?client' in their component tests

I actually don't hate this idea but does this mean that when testing components they are actually ran SSR?
Is there anything useful to test components in SSR output?

[mcous]

For what it's worth, in @testing-library/svelte itself:

• We set { hot: false } in our own Vitest config
• We expose a Vite plugin, adapted from @dominikg's example, as part of our recommended setup to handle the resolve condition

Messing with resolve in the root vite-plugin-svelte feels a little fraught for the reasons mentioned in the thread already

[dominikg]

ooh, thats neat. Maybe we should just document that better then, although it would be neat if the vite plugin disabled hmr so the user won't have to. For svelte5, the hot option is no longer needed anymore but its just compilerOptions.hmr. I'll check what we can do to make this more seamless.

Given the presence of vitest in create-svelte as an option, i'd say the argument for vite-plugin-svelte checking process.env.VITEST and then ensuring that things are smooth isn't outlandish. But ideally an explicitly set option is still respected.

[dominikg]

@Hugos68 does #913 fix this for you? it has been backported to v3 too so we could close this if it works now