@sveltejs/kit and vite@3 broke .svelte file processing in packages

Describe the bug

We use the excellent @rgossiaux/svelte-heroicons package to render icons, and the recent change in Sveltekit and Vite broke the project. The page now fails to load with a 500 error and a Unknown file extension ".svelte" message.

The last known working version of Sveltekit is “1.0.0-next.360” with Vite “2.9.13”.

This might be related to https://github.com/sveltejs/kit/issues/5542

Reproduction

Here’s a an example of the issue

Logs

❯ npm run dev
$ vite dev

  VITE v3.0.0  ready in 1227 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
Unknown file extension ".svelte" for /home/projects/sveltejs-kit-template-default-mubpwk/node_modules/@rgossiaux/svelte-heroicons/outline/AcademicCap/AcademicCap.svelte
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /home/projects/sveltejs-kit-template-default-mubpwk/node_modules/@rgossiaux/svelte-heroicons/outline/AcademicCap/AcademicCap.svelte
    at TypeError.get (https://sveltejs-kit-template-default-mubpwk.w.staticblitz.com/blitz.9dc2007b053e3e7ca4daf0ec1a74b5c3910935fe.js:6:292488)
    at instantiateModule (file:///home/projects/sveltejs-kit-template-default-mubpwk/node_modules/vite/dist/node/chunks/dep-561c5231.js:50345:15)
^C

System Info

❯ npx envinfo --system --binaries --browsers --npmPackages "{svelte,@sveltejs/*,vite}"
success Install finished in 0.737s


  System:
    OS: Linux 5.0 undefined
    CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.14.2 - /usr/local/bin/node
    Yarn: 1.22.10 - /bin/yarn
    npm: 7.17.0 - /bin/npm
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.60 
    @sveltejs/kit: next => 1.0.0-next.377 
    svelte: ^3.46.0 => 3.49.0 
    vite: ^3.0.0 => 3.0.0

Severity

blocking an upgrade

Additional Information

No response

[dominikg]

yes, a vite release that includes the fix should be available in the next days. Until then you can continue to use one of the workarounds above or also something like pnpm patch to patch your local vite with that PR.

[dominikg]

another workaround is to add an ssr.noExternal entry for the problematic import that uses /** at the end. This is a bug in vite-3 and will be fixed.

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
 
export default defineConfig({
  plugins: [sveltekit()],
+  ssr: { noExternal: ['@rgossiaux/svelte-heroicons/**'] }
});