Svelte component with global styles only cannot be found in dev

[RussBaz]

Describe the bug

I am using Vite with Svelte + TS + TailwindCSS.

It just ran npm update on a previously working demo project and then this happened.

If I create a svelte component in src folder called Tailwind.svelte such as this:

<style global lang="postcss">
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
</style>

And then this component is imported from the main App.svelte component

Then the npm run build command will succeed but npm run dev will fail after trying opening the url in a browser with the following message (I have redacted the base path):

[vite] Internal server error: ENOENT: no such file or directory, open '/project_root/src/src/Tailwind.svelte'

If I move the component to a different location (e.g. from ./src to ./src/lib/components), the same error persists:

[vite] Internal server error: ENOENT: no such file or directory, open '/project_root/src/lib/components/src/lib/components/Tailwind.svelte'

However, just removing the global attribute in the component fixes the issue.

A workaround I found is to add a module script such as:

<script context="module">
    const answer = 42;
</script>
<style global lang="postcss">
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
</style>

Then it works as expected.

Reproduction

Create a svelte component in src folder called Tailwind.svelte such as this:

<style global lang="postcss">
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
</style>

And then import this component from the main App.svelte component.

System Info

System:
    OS: macOS 11.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
    Memory: 298.34 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.5.0 - /usr/local/bin/node
    npm: 7.20.0 - /usr/local/bin/npm
  Browsers:
    Firefox: 89.0
    Safari: 14.1.2
  npmPackages:
    vite: ^2.4.3 => 2.4.3

Used Package Manager

npm

Logs

No response

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.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[antstanley]

I was hitting the same problem with folder resolution after updating my dependencies. My project is Svelte + Svelte/Kit + TailwindCSS. My resolution issues are on all components.

In my debugging I've found it's not a Vite problem. It's an issue with Svelte, introduced with version 3.40 of Svelte released 3 days ago. I downgraded to version 3.39 of Svelte and it fixed it for me.

[dominikg]

this is an issue in svelte/sveltekit, see sveltejs/kit#2001

current workaround is to pin svelte to 3.40.1 in your package.json until it is fixed.

[patak-dev]

Let's close this one then and track the issue in the sveltekit repo. Thanks @dominikg