vite and @sveltejs/kit types include @types/node in the browser context

[DetachHead]

Describe the bug

my project has some code that's executed in the browser and other code that's executed by node, so i need to have @types/node installed. unfortunately, the generated .svelte-kit/tsconfig.json includes files (such as ambient.d.ts and vite.config.ts) that rely on node types.

you can see this by disabling skipLibCheck the your project's tsconfig.json then running tsc:

> tsc
node_modules/@sveltejs/kit/types/ambient.d.ts:426:19 - error TS2307: Cannot find module 'http' or its corresponding type declarations.

426   request: import('http').IncomingMessage;
                      ~~~~~~

node_modules/@sveltejs/kit/types/ambient.d.ts:429:42 - error TS2307: Cannot find module 'http' or its corresponding type declarations.

429  export function setResponse(res: import('http').ServerResponse, response: Response): void;
                                             ~~~~~~

node_modules/@sveltejs/kit/types/internal.d.ts:114:28 - error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.

114    read: (file: string) => Buffer;
                               ~~~~~~

node_modules/@sveltejs/kit/types/internal.d.ts:391:27 - error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.

391  read?: (file: string) => Buffer;
                              ~~~~~~

node_modules/sass/types/legacy/render.d.ts:26:8 - error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.

26   css: Buffer;
          ~~~~~~

node_modules/sass/types/legacy/render.d.ts:56:9 - error TS2580: Cannot find name 'Buffer'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node`.

56   map?: Buffer;
           ~~~~~~

node_modules/svelte/types/compiler/interfaces.d.ts:1:53 - error TS2307: Cannot find module 'estree' or its corresponding type declarations.

1 import { AssignmentExpression, Node, Program } from 'estree';
                                                      ~~~~~~~~

node_modules/vite/dist/node/index.d.ts:1:23 - error TS2688: Cannot find type definition file for 'node'.

1 /// <reference types="node" />
                        ~~~~

(ommitted the rest of the errors but there's like 50)

after installing @types/node, typescript now incorrectly treats svelte code as if it's run by nodejs:

<script lang='ts'>
    const a = setTimeout(() => 1, 1)
    a + 1 // Error: Operator '+' cannot be applied to types 'Timeout' and 'number'. (ts)
</script>

(in nodejs, setTimeout returns a Timeout object but in the browser it returns a number)

adding "typeRoots": [] and "types": [] in tsconfig.json does not help because @types/node is still being included by files matched by the include section in .svelte-kit/tsconfig.json

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-nxgj43?file=src%2Froutes%2F%2Bpage.svelte

Logs

No response

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) 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.19 - /usr/local/bin/yarn
    npm: 7.17.0 - /usr/local/bin/npm
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.0.0 
    @sveltejs/kit: ^1.5.0 => 1.10.0 
    svelte: ^3.54.0 => 3.55.1 
    vite: ^4.0.0 => 4.1.4

Severity

serious, but I can work around it

Additional Information

• every svelte project has config files such as vite.config.ts, and @types/node is needed for those files to be correctly type checked
• @playwright/test depends on @types/node so this issue is unavoidable if you select playwright in the npm svelte create menu
• related typescript issue: a way to import from a module without including its globals microsoft/TypeScript#50424

[bluwy]

IIRC Vite relies on @types/node because of web worker types, and we haven't sorted how to fix that. Though generally I'd suggest enabling skipLibCheck since it doesn't quite make sense to apply your tsconfig on other libraries.

[dummdidumm]

This is a general TypeScript problem - basically, once these types are imported somewhere, they are available/present everywhere. There's no way to constrain it to some files/file types.

[SegaraRai]

I don't think this is an upstream-blocked issue. Instead, it happens because all SvelteKit exports are grouped under the root @sveltejs/kit, without proper separation of concerns. In Vite, for example, build-related types are in vite, while client-side types are in vite/client.

From what I understand, types like PluginOptions and Config are primarily used in svelte.config.js, which runs at build time and not in the browser or server. However, since they are exported from the root, they bring @types/node into client-side code, causing issues. (sorry if I'm wrong.)

To avoid this, I suggest moving the type definitions required in svelte.config.js to a separate export like @sveltejs/kit/config. This would keep them isolated from client code while minimizing migration overhead.

[dummdidumm]

The vite config is already included in the tsconfig and with #12090 the same would happen for the Svelte config, so that wouldn't help much

[SegaraRai]

Yes, it is also necessary to separate tsconfig.
As the TS Vite templates did last year, I think we should manage multiple tsconfig using "solution" tsconfig.

[SegaraRai]

In any case, this will be a breaking change, so I think it will be v3 if it is introduced.