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

[sserdyuk]

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 #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

[ifiokjr]

@sserdyuk try this as a temporary workaround in your vite.config.js file.

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
+  legacy: { buildSsrCjsExternalHeuristics: true },
});

[lmtr0]

I'm having the same issue, and here is another work around (if you have a component library like me):

before svelte-kit dev went out of use, I exported all my components from index.ts and I could import them like this:

<script>
import {Btn, Dots, Skeleton, SkeletonBox} from "@higenku/theme"
</script>

now, i removed all the exports and to import something:

<script lang="ts">
import Btn from "@higenku/theme/src/Btn.svelte"
import Dots from "@higenku/theme/src/Dots.svelte"
import Skeleton from "@higenku/theme/src/loaders/Skeleton.svelte"
import SkeletonBox from "@higenku/theme/src/loaders/SkeletonBox.svelte"

</script>

the build error is the same

[sserdyuk]

@sserdyuk try this as a temporary workaround in your vite.config.js file.

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
+  legacy: { buildSsrCjsExternalHeuristics: true },
});

Thank you. It does help.

[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/**'] }
});

[dominikg]

and here is a more generic workaround using a vite plugin to modify the ssr.noExternal configuration.

import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [
		sveltekit(),
		// utility plugin to append `/**` to strings in ssr.noExternal
		{
			name: 'vite-plugin-patch-ssr-noexternal',
			enforce: 'post',
			config(cfg) {
				if (!cfg.ssr?.noExternal) return;
				cfg.ssr.noExternal = cfg.ssr.noExternal.map((x) =>
					typeof x !== 'string' || x.includes('*') || x.endsWith('/**') ? x : `${x}${!x.endsWith('/') ? '/' : ''}**`
				);
			}
		}
	]
};

export default config;

[lmtr0]

It's merged

[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.

[bluwy]

The fix in Vite has been released in Vite 3.0.1. Upgrading to it should fix the issue.

[lmtr0]

I test it with vite 3.0.2 and got the same error:

VITE v3.0.2  ready in 238 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
Unknown file extension ".svelte" for /home/me/repo/sdks/theme/@higenku/theme/src/footer/Footer.svelte
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /home/me/repo/sdks/theme/@higenku/theme/src/footer/Footer.svelte
    at new NodeError (node:internal/errors:388:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:80:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:122:38)
    at defaultLoad (node:internal/modules/esm/load:21:20)
    at ESMLoader.load (node:internal/modules/esm/loader:431:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:350:22)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at #createModuleJob (node:internal/modules/esm/loader:369:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:328:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:82:21)

sample code:

index.ts in the library:

import Footer from "./footer/Footer.svelte";
export {
    Footer,
};

tests/src/routes/__layout.svelte:

<script lang="ts">
import {Footer} from "@higenku/theme"
</script>

Source code: https://gitlab.com/higenku/sdks/theme currently on the wip branch

[lmtr0]

I tried this:

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
    plugins: [sveltekit(),
        {
			name: 'vite-plugin-patch-ssr-noexternal',
			enforce: 'post',
			config(cfg) {
				if (!cfg.ssr?.noExternal) return;
				cfg.ssr.noExternal = cfg.ssr.noExternal.map((x) =>
					typeof x !== 'string' || x.includes('*') || x.endsWith('/**') ? x : `${x}${!x.endsWith('/') ? '/' : ''}**`
				);
			}
		}
    ],
    server: {
        port: 3000,
    },
    deps: {
        inline: ['@higenku/theme'],
    }
};

export default config;

but even this did not work

[benmccann]

@lmtr0 also filed an issue reporting the same as they commented here and it's unclear to me the bug remains based on the discussion there: #5600