npm run dev throws vite error if .vite cache folder is not empty

[b2m9]

Hi there 👋

I updated a project from svelte kit next.52 to next.232 and I'm running into problems with vite loading PostCSS/Tailwind. I can run npm run dev and npm run build. However, I cannot run npm run dev a second time once vite's cache in node_modules/.vite is not empty:

[vite] Error when evaluating SSR module /src/routes/__layout.svelte:
Error: Cannot find module '/home/.../postcss.config.cjs' imported from '/home/.../node_modules/vite/dist/node/chunks/dep-f5552faa.js'

Once I clear the .vite folder, it works again. According to the vite docs you can disable the cache by using --force but svelte kit doesn't seem to expose this flag. So my solution is just to nuke the folder via rm -r node_modules/.vite && svelte-kit dev --host for npm run dev

Has anyone encountered this problem? How can I convince vite not to import my PostCSS config?

Thankful for any hints 🙏

[benmccann]

I have no issues running Tailwind with next.232. I set it up with https://github.com/svelte-add/tailwindcss and recommend mirroring your project setup to what that would do

[bluwy]

@akiarostami Are you on windows? There was a followup fix for that in Vite 2.8.0-beta.6

[akiarostami]

@bluwy no I’m on Mac. And I installed beta.26 earlier today as well, but still have that issue.

[bluwy]

That's really strange. Can you show the error messages with all the paths? Or better with a minimal repro repo/stackblitz. You can also debug this locally with Vite. The particular issue happens here. From the logic there, it has certain hueristics to avoid a "vite resolve" and resort to the default `"nodejs resolve" instead. Usually "vite resolve" is causing the error you see now.

[benmccann]

I can't remember which project I ran into this on. Maybe it was luck that I didn't encounter it again after upgrading Vite

[b2m9]

I can confirm that this behavior is gone in my project since SvelteKit updated its vite dependency in 262.

[hyunbinseo]

I did not encounter such issue using tailwindcss, postcss, autoprefixer.

I followed the official documentation, Get started with Tailwind CSS.

Could there be a repository for reproduction?

[hyunbinseo]

@b2m9 @akiarostami Providing a working repository instead.

https://github.com/hyunbinseo/sveltekit-tailwindcss

Run npm run dev and then route to /tailwind.

It should look like this Hero UI from Tailwind UI Kit.

[akiarostami]

Thank you @hyunbinseo, but I have a lot of code and copy/pasting it into a new repository does not make sense. Everything was working fine until I updated sveltekit and postcss. I'm hoping that someone would help me figure out what the problem is.

[b2m9]

This seems to be have been an issue with vite. It has been resolved in #3791. I do not experience this issue anymore in version 1.0.0-next.262.