@sveltejs/kit and vite@3 in typescript monorepo fails with ERR_UNKNOWN_FILE_EXTENSION

[ifiokjr]

Describe the bug

A pnpm monorepo with symlinked TypeScript packages during development fails with the message ERR_UNKNOWN_FILE_EXTENSION.

@sveltejs/vite-plugin-svelte works fine. Things only break with the kit() plugin from the @sveltejs/kit/vite endpoint.

Reproduction

Here is a minimal(ish) reproduction: https://github.com/ifiokjr/vite3-unknown-file-extension

The readme describes where the error occurs, along with an example of vite handling the typescript package files correctly without @sveltejs/kit.

Logs

Unknown file extension ".ts" for /path/to/root/vite3-unknown-file-extension/packages/simple/src/index.ts
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /path/to/root/vite3-unknown-file-extension/packages/simple/src/index.ts
    at new NodeError (node:internal/errors:377: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 Promise.all (index 0)

System Info

System:
    OS: macOS 12.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz
    Memory: 17.79 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.3.0 - ~/Library/Caches/fnm_multishells/43378_1657864625724/bin/node
    npm: 8.11.0 - ~/Library/Caches/fnm_multishells/43378_1657864625724/bin/npm
    Watchman: 2022.07.04.00 - /usr/local/bin/watchman
  Browsers:
    Brave Browser: 103.1.40.107
    Chrome: 103.0.5060.114
    Chrome Canary: 105.0.5179.0
    Firefox: 99.0.1
    Safari: 15.5
  npmPackages:
    @sveltejs/adapter-auto: 1.0.0-next.60 => 1.0.0-next.60 
    @sveltejs/kit: 1.0.0-next.375 => 1.0.0-next.375 
    svelte: 3.44.0 => 3.44.0 
    vite: 3.0.0 => 3.0.0

Severity

blocking an upgrade

Additional Information

No response

[Mlocik97]

I saw on Discord 3 people with this issue. It really seems to be bug in kit or vite.

[benmccann]

@ifiokjr I would guess this is caused by Vite / Node.js and there's really nothing we can do about it in SvelteKit. The plain Vite example you have does not use SSR and that's probably why you're not encountering it there. Could you also try an example that uses Vite with SSR and without SvelteKit? https://github.com/sveltejs/kit#bug-reporting I would guess that would break and then you should file this in the Vite repo instead

[Mlocik97]

adding another two errors from Discord:

Unknown file extension ".css" for /home/jacek/storage/developSSD/e-poezja-svelte/node_modules/sanitize.css/sanitize.css
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for /home/jacek/storage/developSSD/e-poezja-svelte/node_modules/sanitize.css/sanitize.css
    at new NodeError (node:internal/errors:371:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:84:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:99:38)
    at defaultLoad (node:internal/modules/esm/load:21:14)
    at ESMLoader.load (node:internal/modules/esm/loader:359:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:280:58)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:297:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:261:34)
    at async Promise.all (index 0)

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" 

(still waiting for second error)

[ifiokjr]

@benmccann I think you're right about this being an upstream issue. As a temporary workaround setting your vite config to the following allows it to build.

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

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

I found it in the migration guide. https://vitejs.dev/guide/migration.html#ssr-changes

[bluwy]

This is a bug in Vite. Submitted vitejs/vite#9296 to fix it.

[bluwy]

Closing as Vite 3.0.3 has been released.