/// <reference types="@sveltejs/kit" /> isn't work as intended.

[gyurielf]

Describe the bug

In the latest version of sveltekit reference type declarations in the global.d.ts file isn't work as intended.

When I run tsc --noEmit it will get back with the following errors:

src/lib/env.ts:1:37 - error TS2339: Property 'env' does not exist on type 'ImportMeta'.

1 export const BASE_URL = import.meta.env.VITE_BASE_URL;
                                      ~~~
src/lib/utils/api.ts:3:22 - error TS2307: Cannot find module '$app/navigation' or its corresponding type declarations.

3 import { goto } from '$app/navigation';

Extending types with these types will solve the problem.
I think would be better using the references rather than this.

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vite/client", "./node_modules/@sveltejs/kit/types/ambient-modules"]
  }
 }

If I remove these options and /// from the global.d.ts, the result will be the same.
AFAIK all of the added compilerOpt types is imported & exported in @sveltejs/kit, but isn't works as it has to.

Reproduction

Install a fresh svelte kit template and turn into typescript.
Update packages.
Try using env declarations.
run tsc --noEmit

Logs

src/lib/env.ts:1:37 - error TS2339: Property 'env' does not exist on type 'ImportMeta'.

1 export const BASE_URL = import.meta.env.VITE_BASE_URL;
                                      ~~~

src/lib/utils/api.ts:3:22 - error TS2307: Cannot find module '$app/navigation' or its corresponding type declarations.

3 import { goto } from '$app/navigation';

### System Info

```shell
System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.66 GB / 15.48 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.13.0 - /usr/bin/node
    npm: 8.1.0 - /usr/bin/npm
  Browsers:
    Chrome: 96.0.4664.45
    Firefox: 94.0
  npmPackages:
    @sveltejs/adapter-static: ^1.0.0-next.21 => 1.0.0-next.21 
    @sveltejs/kit: ^1.0.0-next.196 => 1.0.0-next.196 
    svelte: ^3.44.2 => 3.44.2

Severity

serious, but I can work around it

Additional Information

Extending types with these types will solve the problem.
I think would be better using the references rather than this.

{
  "compilerOptions": {
    "types": ["vite/client", "./node_modules/@sveltejs/kit/types/ambient-modules"]
  }
 }

[bluwy]

compilerOptions.types was avoided because it would override all default ambient types, hence we add the types separately in a d.ts file. Can you show you're full tsconfig.json? Make sure include covers the .d.ts file as well for TypeScript to pick up the extra typings.

[dummdidumm]

This is a typescript bug which is tracked at microsoft/TypeScript#46860 . If you downgrade to 4.4 you won't get the issue. I think we can fix it on our end in the meantime as well though, will look into that later.

[gyurielf]

This is a typescript bug which is tracked at microsoft/TypeScript#46860 . If you downgrade to 4.4 you won't get the issue. I think we can fix it on our end in the meantime as well though, will look into that later.

I tried with 4.4.4.

[gyurielf]

compilerOptions.types was avoided because it would override all default ambient types, hence we add the types separately in a d.ts file. Can you show you're full tsconfig.json? Make sure include covers the .d.ts file as well for TypeScript to pick up the extra typings.

here is my tsconfig.json

{
    "compilerOptions": {
        "moduleResolution": "node",
        "module": "es2020",
        "lib": ["es2020", "DOM"],
        "target": "es2020",
        "importsNotUsedAsValues": "error",
        "isolatedModules": true,
        "resolveJsonModule": true,
        "sourceMap": true,
        "esModuleInterop": true,
        "skipLibCheck": true,
        "forceConsistentCasingInFileNames": true,
        "baseUrl": ".",
        "allowJs": true,
        "checkJs": true,
        "paths": {
            "$lib/*": ["src/lib/*"]
        },
        // Workaround for "module cannot found"
        // "types": ["vite/client", "./node_modules/@sveltejs/kit/types/ambient-modules"],
        "strict": true
    },
    "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"],
    "exclude": ["node_modules/*", "static/*", "ui-kit/*"]
}

[bluwy]

Hmm if include already covers d.ts files, then I think it boils down the @dummdidumm's linked issue. Maybe your IDE is still using typescript 4.5 when you tested it? In vscode, you can open the command palette and choose "Select TypeScript version" to change it. Or perhaps you've edited the .d.ts file that it becomes a module file (which types doesn't apply globally).

[gyurielf]

Hmm if include already covers d.ts files, then I think it boils down the @dummdidumm's linked issue. Maybe your IDE is still using typescript 4.5 when you tested it? In vscode, you can open the command palette and choose "Select TypeScript version" to change it. Or perhaps you've edited the .d.ts file that it becomes a module file (which types doesn't apply globally).

The VSCode using 4.4.3. However the trick was in the node_modules folder.
I've delete the both node_modulse and package.lock, and in my package.json thy typescript version was set 4.4.4,
and every time when I ran npm i it's insalled 4.5.x and that was the problem.
Thank you for pointing to the possible problem sources.