Warnings when using SASS: "svelte.preprocess returned this file as a dependency of itself"

[josdejong]

I'm working on an upgrade of my Svelte project to @sveltejs/kit@2, vite-plugin-svelte@3, vite@5, and vitest@1. All works fine, except I now get the following warning for each of my Svelte component:

10:52:18 [vite-plugin-svelte] .../StatusBar.svelte svelte.preprocess returned this file as a dependency of itself. This can be caused by an invalid configuration or importing generated code that depends on .svelte files (eg. tailwind base css)

Now, I'm using svelte-preprocess and sass in all of my components, like:

<!-- file: StatusBar.svelte -->
<script lang="ts">
  // ...
</script>

<div>
  ...
</div>

<style src="./StatusBar.scss"></style>

When I remove <style src="./StatusBar.scss"></style> from the file, the warning disappears so it looks like this is related to usage of SASS.

Any idea how to solve this?

[richardfxr]

I ran into this issue as well after migrating to SvelteKit v2.

It occurs when the SCSS preprocessor has prependData set, such as in the following case shown in the Getting Started doc:

//  part of svelte.config.js

const config = {
    preprocess: preprocess({
        scss: {
            prependData: `@import 'src/styles/variables.scss';`
        }
    }),
};

Any Svelte file that includes <style lang="scss"> will now produce the following message:

[vite-plugin-svelte] root_directory/src/routes/+page.svelte svelte.preprocess returned this file as a dependency of itself. This can be caused by an invalid configuration or importing generated code that depends on .svelte files (eg. tailwind base css)

I've created a minimal reproduction of this issue here: https://github.com/richardfxr/sveltekit2-preprocess-dependency-issue

[typhonrt]

OK.. Cool.. I also came across this just now when updating a non-SvelteKit library / app and also came to the determination that any Svelte component that uses <style lang="scss"> with the default AutoPreprocessGroup is affected. I just happen to be working on a Windows box and it appears the offending code is here:
https://github.com/sveltejs/svelte-preprocess/blob/main/src/transformers/scss.ts#L74-L84

The discrepancy is absoluteEntryPath and the check done subsequently in:

 Array.from(compiled.stats.includedFiles).filter(
      (filepath) => filepath !== absoluteEntryPath,
    ),

appears to be comparing a Posix file path and a Windows resolved one. So quite likely this issue isn't seen from any Svelte maintainers not working on Windows.

Of course other transformers may also have this issue in regard to path comparisons. @sveltejs/vite-plugin-svelte just added listing warning messages in 3.0.x. IE the svelte-preprocess code might have been like this for a while, but it wasn't until the latest Vite plugin recently released that dependencies from the output preprocessing were logged as warnings.

[dominikg]

see here how to silence the warning until this is fixed sveltejs/vite-plugin-svelte#822 (comment)

[kaisermann]

Seems to be a sass issue (and it's probably going on for quite a while).

The compiled.stats.entry is a windows path in posix format:

D:/a/svelte-preprocess/svelte-preprocess/potato/src/routes/+page.svelte

While the compiled.stats.includedFiles are all win32 paths 🤷

[
    'D:\\a\\svelte-preprocess\\svelte-preprocess\\potato\\src\\routes\\+page.svelte',
    'D:\\a\\svelte-preprocess\\svelte-preprocess\\potato\\src\\styles\\variables.scss',
]

Should be fixed by #621

[josdejong]

Thanks a lot Christian for debugging and working out a fix.

FYI: I'm indeed using Windows.

[kaisermann]

Hey @josdejong, i just released 5.1.3, can you try with it now? This issue is awful to reproduce via automated tests for some reason

[josdejong]

Wow that's fast 🚀😎. The issue is indeed resolved now, thanks a lot.

[bmcbarron]

I'm still seeing this issue with 5.1.3. I'm also on windows, although vite dev is run from a git bash shell. @josdejong how are you running it?

Is there a straightforward way for me to examine compiled.stats.*?

[josdejong]

@bmcbarron I'm working on svelte-jsoneditor, you can checkout the git project, run npm install, and then npm run dev or npm run build to try it out and see the differences with your project.

On a side note: a stupid deletion of package-lock.json and node_modules and then a fresh install sometimes also works 😁 .