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.