vitest: Unknown file extension ".svelte" when importing Svelte files

Describe the bug

Similar to https://github.com/vitest-dev/vitest/issues/1395, but the proposed solution does not work.

I’ve created a minimal repro that triggers the bug, i’ve also given more explanation in its readme.

Reproduction

https://github.com/MathiasWP/vitest-unknown-file-extension-svelte-bug-repro

System Info

System:
    OS: macOS 13.3
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 54.02 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 112.1.50.114
    Chrome: 112.0.5615.49
    Firefox: 111.0.1
    Safari: 16.4
  npmPackages:
    vite: ^4.2.0 => 4.2.1 
    vitest: ^0.30.1 => 0.30.1

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.

About this issue

Original URL
State: closed
Created a year ago
Comments: 18 (13 by maintainers)

Most upvoted comments

I was able to get rid of that error by changing the import to: import Button from '../dist/Button.svelte'

However, the problem that arises is the same that I’m running into - which is that if there is a svelte file anywhere other than the src directory, it is either not compiled, or otherwise not picked up due to:

FAIL  tests/Button.test.ts [ tests/Button.test.ts ]
Error: Failed to load url /dist/Button.svelte (resolved id: /Users/sj/Downloads/vitest-unknown-file-extension-svelte-bug-repro-main/dist/Button.svelte) in /Users/sj/Downloads/vitest-unknown-file-extension-svelte-bug-repro-main/tests/Button.test.ts. Does the file exist?
 ❯ loadAndTransform node_modules/.pnpm/vite@4.2.0_@types+node@18.15.11/node_modules/vite/dist/node/chunks/dep-c167897e.js:41081:21

This is the exact same problem as it would be if you put the svelte button in your tests dir and tried to import it.

sureshjoshi on Apr 14, 2023