Unknown file extension .svelte still happening

[webJose]

Describe the bug

I am creating a new bug report since this one got closed and limited, therefore I cannot comment on it.

This problem is still present. The original issue states that "dist" folders are not being given special treatment anymore, and this is why the issue was allegedly closed (as far as I can tell). I am in Vitest 2.1.1 and this still happens.

Reproduction

1. Make a component library with SvelteKit, build it and consume it in your project.
2. Now write a test that ends up importing a component from the library in the step before.

The error should appear. Current vite.config.ts configuration:

import { sveltekit } from '@sveltejs/kit/vite';
import { svelteTesting } from '@testing-library/svelte/vite';
import { defineConfig } from 'vitest/config';

export default function () {
    return defineConfig({
        plugins: [sveltekit(), svelteTesting()],
        test: {
            include: ['src/**/*.{test,spec}.{js,ts}', 'src/**/*.{test,spec}.svelte.{js,ts}'],
            environment: 'jsdom',
            globals: true
        }
    });
};

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
    Memory: 18.63 GB / 39.73 GB
  Binaries:
    Node: 20.17.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.105)
    Internet Explorer: 11.0.22621.3527

Used Package Manager

npm

Validations

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

[github-actions[bot]]

Hello @webJose. Please provide a minimal reproduction using a GitHub repository or StackBlitz (you can also use examples). Issues marked with needs reproduction will be closed if they have no activity within 3 days.

[AriPerkkio]

Reproduction

1. Make a component library with SvelteKit, build it and consume it in your project.

Please provide a minimal reproduction. Asking maintainers to create component libraries with specific framework is too much.

[webJose]

No problem. But really? You can do npm create svelte@latest and be done in 5 minutes. But I digress. Anyway, I have an update on this.

I could not follow the recommendation of deps.include found in the linked issue because it wasn't showing in Intellisense and Vitest documents don't have it. Being that the issue spoke about "v0.31.2", I figured the property just disappeared through the course of time.

Being the stubborn person that I sometimes am, I still typed "inline", and to my surprise it showed up in Intellisense, where I could read that there was a server.deps.inline property. Using this property works, but I had to do what Svelte core team member Dominik had to do: Use a regular expresion of the form /@scope\/name/ as a regular string would not work.

I think this should be documented as a minimum, as I bet it happens to others. If I may be so bold, I'd like to ask if this is a workaround or is it expected to always be like this?

My updated vite.config.ts file:

import { sveltekit } from '@sveltejs/kit/vite';
import { svelteTesting } from '@testing-library/svelte/vite';
import { defineConfig } from 'vitest/config';

export default function () {
    return defineConfig({
        plugins: [sveltekit(), svelteTesting()],
        test: {
            include: ['src/**/*.{test,spec}.{js,ts}', 'src/**/*.{test,spec}.svelte.{js,ts}'],
            environment: 'jsdom',
            globals: true,
            server: {
                deps: {
                    inline: [/@scope\/name/]
                }
            }
        },
    });
};

Thank you very much for the time taken to give me some attention. I appreciate it. Cheers!

[webJose]

Update

The workaround fails when 2 regular expressions are added to server.deps.inline. Example:

import { sveltekit } from '@sveltejs/kit/vite';
import { svelteTesting } from '@testing-library/svelte/vite';
import { defineConfig } from 'vitest/config';

export default function () {
    return defineConfig({
        plugins: [sveltekit(), svelteTesting()],
        test: {
            include: ['src/**/*.{test,spec}.{js,ts}', 'src/**/*.{test,spec}.svelte.{js,ts}'],
            environment: 'jsdom',
            globals: true,
            server: {
                deps: {
                    inline: [/@scope1\/name1/, /@scope2\/name2/]
                }
            }
        },
    });
};

Preliminary testing seems to indicate that only the first one is honored.

[AriPerkkio]

The workaround fails when 2 regular expressions are added to server.deps.inline

Without seeing some code and being able to run a minimal reproduction there's not much we can do. Those configuration files look just fine to me.