Cannot find module '$env/static/public' or its corresponding type declarations.ts(2307)

[winston0410]

Please read this comment first

Might explain your issue: https://github.com/sveltejs/kit/issues/8882#issuecomment-1848443983

Describe the bug

The definition for '$env/static/public' cannot be found by Typescript in *.svelte file. It works in the runtime though

Reproduction

https://github.com/winston0410/missing-env-module

Logs

No response

System Info

System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
    Memory: 84.88 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.17 - /opt/homebrew/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
    Watchman: 2022.09.05.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 109.1.47.186
    Safari: 14.1.1
  npmPackages:
    @sveltejs/adapter-auto: ^1.0.0 => 1.0.2 
    @sveltejs/kit: ^1.0.0 => 1.3.10 
    svelte: ^3.54.0 => 3.55.1 
    vite: ^4.0.0 => 4.1.1

Severity

annoyance

Additional Information

No response

[dummdidumm]

Did you run vite dev (for npm run dev) or svelte-kit sync prior to the error? The types need to be generated first - if I do this, I can't reproduce this.

[winston0410]

Did you run vite dev (for npm run dev) or svelte-kit sync prior to the error? The types need to be generated first - if I do this, I can't reproduce this.

Yes I have run vite dev before that. May I ask the version of language tool you have on your side?

Also I notice that this issue does not exist in .ts, only in .svelte

[dummdidumm]

I'm using the latest version https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode and no other Svelte-related extensions. I don't get this error inside Svelte files, once the types are generated.

[cesarnml]

Same issue. This is only an issue with eslint. The module is imported properly, just give a false lint warning.

eslintrc.cjs

/* eslint-disable global-require */
module.exports = {
    root: true,
    parser: '@typescript-eslint/parser',
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'airbnb-base',
        'airbnb-typescript/base',
        'prettier',
    ],
    plugins: ['svelte3', '@typescript-eslint', 'import'],
    ignorePatterns: ['*.cjs', '*.mjs'],
    overrides: [
        {
            files: ['*.svelte'],
            processor: 'svelte3/svelte3',
            rules: {
                'import/no-extraneous-dependencies': 0,
                'import/extensions': 0,
                'import/newline-after-import': 0,
                'import/first': 0,
                'import/no-duplicates': 0,
                'import/no-mutable-exports': 0,
                'import/no-unresolved': 0,
                'import/prefer-default-export': 0,
                'import/order': 0,
                '@typescript-eslint/no-use-before-define': 0,
            },
        },
    ],
    settings: {
        'svelte3/typescript': () => require('typescript'),
        'import/resolver': {
            typescript: {
                alwaysTryTypes: true, // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
            },
        },
    },
    parserOptions: {
        sourceType: 'module',
        ecmaVersion: 2020,
        project: ['./tsconfig.json'],
        extraFileExtensions: ['.svelte'],
    },
    env: {
        browser: true,
        es2017: true,
        node: true,
    },
    globals: {
        Email: 'readonly',
    },
    rules: {
        '@typescript-eslint/no-shadow': 0,
        '@typescript-eslint/no-var-requires': 0,
        '@typescript-eslint/no-throw-literal': 0,
        'no-param-reassign': 0,
        'no-plusplus': 0,
        'consistent-return': 0,
        'no-lonely-if': 0,
        'prefer-const': 0,
        'import/no-extraneous-dependencies': 0,
        'import/prefer-default-export': 0,
    },
}

[winston0410]

For me I figured out the issue. Install the latest language tool and restarting it fixed the issue. I guess @cesarnml your issue is slightly different with mine? not sure

[Destaq]

Same problem here with a .ts file (in a Svelte project). Restarting, unfortunately, didn't fix anything.

[Destaq]

Here are a couple of workarounds:

1. Redefine the module in your src folder:

   // src/types.d.ts
   declare module "$env/static/public" {
    export const PUBLIC_KEY: <type>;
   }

2. Explicitly include the generated types file in your tsconfig.json:

   {
   "include": ["src/**/*", "src/node_modules", ".svelte-kit/ambient.d.ts"], // see last element
   }

Not sure why it doesn't work out of the box though.

[Rich-Harris]

Can anyone reproduce this in a fresh project? I can't

[homerjam]

I have a possibly related issue.

It's very inconsistent, seems to happen on a particular machine and usually when opening several tabs at once after the initial running of npm run dev

[dummdidumm]

Which version of SvelteKit are you on? The error seems unrelated and the cause for it should be fixed in the latest version.

[benwoodward]

adding ".svelte-kit/ambient.d.ts" to the list of includes in .tsconfig.json fixed this for me.

[Julian-Boerema]

Can anyone reproduce this in a fresh project? I can't

Unfortunately, yes. Below a screenshot of a "fresh" DENO fresh installation, without any alterations. deno run -A -r https://fresh.deno.dev my-project

Have you come across any information in the meantime that might solve this problem?

[skylar]

I also ran into this issue today when updating to the latest Svelte/kit and Vite libraries. The problem is only when running test in vitest.

[amyjko]

Likely due to the new 0.32 breaking change, which throws errors on unresolvable modules:

https://github.com/vitest-dev/vitest/releases/tag/v0.32.0

It looks like vitest was masking unresolved modules, and now it's not.

[phobetron]

Downgrading vitest to v0.31.4 fixed a similar problem for my project.

[DanielRios549]

I fixed this problem by adding both .svelte-kit/ambient.d.ts and .svelte-kit/types/**/$types.d.ts in the include section of tsconfig.json.

Also, make sure .svelte-kit folder is not in the exclude section, otherwise it will remove both entries above.

[MiguelArmendariz]

I also met this issue, I tried the work arounds with no luck. The env vars work, so I think I'll continue working as it is.

"devDependencies": {
        "@playwright/test": "^1.28.1",
        "@sveltejs/adapter-auto": "^2.0.0",
        "@sveltejs/kit": "^1.24.0",
        "@typescript-eslint/eslint-plugin": "^6.5.0",
        "@typescript-eslint/parser": "^6.5.0",
        "autoprefixer": "^10.4.15",
        "eslint": "^8.48.0",
        "eslint-config-prettier": "^9.0.0",
        "eslint-plugin-svelte": "^2.30.0",
        "postcss": "^8.4.29",
        "prettier": "^3.0.3",
        "prettier-plugin-svelte": "^3.0.3",
        "svelte": "^4.0.5",
        "svelte-check": "^3.5.1",
        "tailwindcss": "^3.3.3",
        "tslib": "^2.4.1",
        "typescript": "^5.2.2",
        "vite": "^4.4.2",
        "vitest": "^0.34.3"
    },

[boian-ivanov]

This seems to be caused only if you override the tsconfig's include path, in essence removing the ambient.d.ts, which you would extend previously via the generated ./.svelte-kit/tsconfig.json. Had it as well and just removing the include worked great.

[huseeiin]

Can anyone reproduce this in a fresh project? I can't

i got it when i used "plugin:@typescript-eslint/strict-type-checked"

[huseeiin]

and also i got an insane amount of errors from using this config, mainly the issue above and all variables that are correctly typed by sveltekit are any according to eslint

[dummdidumm]

Everyone who also has the problem, please always tell if you have the include option in your tsconfig.json and if yes what it contains - I suspect that all these errors come from adding include to the tsconfig.json. It should not be necessary to do this, and if you do, it will override any of the include options that are prepared for you in the generated tsconfig.json that's within the .svelte-kit folder.

[524c]

Everyone who also has the problem, please always tell if you have the include option in your tsconfig.json and if yes what it contains - I suspect that all these errors come from adding include to the tsconfig.json. It should not be necessary to do this, and if you do, it will override any of the include options that are prepared for you in the generated tsconfig.json that's within the .svelte-kit folder.

Mine was like this:

  "include": [
    "./**/*.svelte",
    "./**/*.ts",
    "./**/*.js",
  ]

And it had resolved after adjusting to:

  "include": [
    "./**/*.svelte",
    "./**/*.ts",
    "./**/*.js",
    ".svelte-kit/ambient.d.ts",
  ]

I don't remember when or why I added this include. But in fact "./.svelte-kit/tsconfig.json" already has everything we need, so I think I should just delete the include from my tsconfig.json!? i will test.

[524c]

I just confirmed that when I completely remove my custom include the problem goes away.

[ZerdoX-x]

@dummdidumm

My case: 1) I was trying to deal with https://github.com/sveltejs/eslint-plugin-svelte/issues/432 by adding and configuring https://github.com/ota-meshi/typescript-eslint-parser-for-extra-files 2) It required me to set (see project's readme)

"include": [
    "**/*.svelte",
    "**/*.ts",
    "**/*.tsx"
]

Can confirm that adding ".svelte-kit/ambient.d.ts" to "includes" resolves the issue. Should we just add ".svelte-kit/ambient.d.ts" to tsconfig.includes by default in all svelte project templates? Because sometimes users need to define their own "includes" for the project, but tsconfig just redefines the whole field. Never liked how tsconfig works.. It is a nightmare

For me modifying starter templates and maybe this page of documentation (could not find similar page for sveltekit except this one) looks like a solution to satisfy the issue and DX. And I hope we won't leave it as "works as intended" due to typescript's tsconfig nature :D

[juwul]

@ZerdoX-x

Can confirm that adding ".svelte-kit/ambient.d.ts" to "includes" resolves the issue.

Same experience for me in a completely fresh project.

"devDependencies": {
        "@angular/cli": "^17.1.0",
        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/kit": "^2.0.0",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "svelte": "^4.2.7",
        "svelte-check": "^3.6.0",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^5.0.3"
    },

[pboling]

Same experience for me in a brand new SvelteKit 2 / Svelte 5 project. I have not modified any tsconfig.json. I installed svelte-check, ran it (no issues found), installed a few Svelte-related JetBrains WebStorm IDE plugins, restarted my IDE, switched branches working on other stuff a few times, re-did pnpm install, and I still have the warning... :(

Update: I have no idea what I'm doing. First project, and a bit lost. Haven't been able to make the warning go away, but have a lot of other stuff working!

[lucidNTR]

have the same in fresh project with $env/dynamic/private it happens in a module in the lib/server folder

[Davidiusdadi]

Had the same issue - and solved it like this:

For some reason I had added ".svelte-kit" to my repo root tsconfig exclude list. :man_facepalming:

By default "extends": "./.svelte-kit/tsconfig.json", in the tsconfig should handle things: That means that yarn tsc --showConfig will list files .svelte-kit/* like .svelte-kit/ambient.d.ts within the files entry!

If not, the files may have:

• not yet been generated (as noted by dummdidumm )
• not been included because you override include shadowing the ./.svelte-kit/tsconfig.json include.
• maybe been included but are excluded via "exclude": [".svelte-kit"]

[arkmech]

Yeah this doesn't work at all with new project:

1. Root tsconfig.json, which extends "./.svelte-kit/tsconfig.json"
2. .svelte-kit tsconfig.json includes ambient.d.ts
3. ambient.d.ts declares module '$env/static/private' that includes my env variables in my .env.

I get Cannot find module '$env/static/private' or its corresponding type declarations.

    "devDependencies": {
        "@biomejs/biome": "^1.6.0",
        "@playwright/test": "^1.28.1",
        "@sveltejs/adapter-auto": "^3.0.0",
        "@sveltejs/kit": "^2.5.3",
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "@tailwindcss/vite": "4.0.0-alpha.7",
        "drizzle-kit": "^0.20.14",
        "svelte": "^5.0.0-next.74",
        "svelte-check": "^3.6.0",
        "tailwindcss": "4.0.0-alpha.7",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^5.0.3",
        "vitest": "^1.2.0"
    }

EDIT: This is error is coming from my drizzle.config.ts which is located at root of the project. Maybe that's why? Is $env/static/private only available within src?

[eltigerchino]

EDIT: This is error is coming from my drizzle.config.ts which is located at root of the project. Maybe that's why? Is $env/static/private only available within src?

Yes, your drizzle config typescript file needs to be added to the include array in tsconfig. But you don't want to override the include array that sveltekit generates, so you need to copy over the ones inside ./.svelte-kit/tsconfig.json and then add an additional entry.

My suspicion is that most people encountering this issue have typescript files (usually config files) outside the src directory which are not included by the tsconfig sveltekit generates.

[Bewinxed]

Had the same issue - and solved it like this:

For some reason I had added ".svelte-kit" to my repo root tsconfig exclude list. 🤦‍♂️

By default "extends": "./.svelte-kit/tsconfig.json", in the tsconfig should handle things: That means that yarn tsc --showConfig will list files .svelte-kit/* like .svelte-kit/ambient.d.ts within the files entry!

If not, the files may have:

• not yet been generated (as noted by dummdidumm )
• not been included because you override include shadowing the ./.svelte-kit/tsconfig.json include.
• maybe been included but are excluded via "exclude": [".svelte-kit"]

Thanks for this, Copilot added it in 🤦‍♂️

[mhamri]

As far as I understand, the include option won't be merged; instead, it will be overridden. This means that if you have an include in your .sveltekit. tsconfig.json, it will be overridden by the one in root.

so in my case the culprit was having include and exclude in the root tsconfig.json

https://www.typescriptlang.org/tsconfig/#extends