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

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

About this issue

  • Original URL
  • State: open
  • Created a year ago
  • Reactions: 4
  • Comments: 31 (8 by maintainers)

Commits related to this issue

Most upvoted comments

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

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>;
}
  1. 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.

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.

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.

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?

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.

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

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.

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.

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"]

@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 😄

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.

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.

@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"
	},

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

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