kit
kit copied to clipboard
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
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.
Did you run
vite dev
(fornpm run dev
) orsvelte-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
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.
![Screenshot 2023-02-10 at 04 18 00](https://user-images.githubusercontent.com/26180499/217941318-d497faee-8e22-4246-b282-16b2cd08311d.png)
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,
},
}
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
Same problem here with a .ts
file (in a Svelte project). Restarting, unfortunately, didn't fix anything.
Here are a couple of workarounds:
- Redefine the module in your
src
folder:
// src/types.d.ts
declare module "$env/static/public" {
export const PUBLIC_KEY: <type>;
}
- 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.
Can anyone reproduce this in a fresh project? I can't
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
Which version of SvelteKit are you on? The error seems unrelated and the cause for it should be fixed in the latest version.
adding ".svelte-kit/ambient.d.ts"
to the list of includes in .tsconfig.json
fixed this for me.
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?
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.
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.
Downgrading vitest to v0.31.4
fixed a similar problem for my project.
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.
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"
},
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.
Can anyone reproduce this in a fresh project? I can't
i got it when i used "plugin:@typescript-eslint/strict-type-checked"
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
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.
Everyone who also has the problem, please always tell if you have the
include
option in yourtsconfig.json
and if yes what it contains - I suspect that all these errors come from addinginclude
to thetsconfig.json
. It should not be necessary to do this, and if you do, it will override any of theinclude
options that are prepared for you in the generatedtsconfig.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.
I just confirmed that when I completely remove my custom include the problem goes away.
@dummdidumm
My case:
- 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
- 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
@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"
},
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!
have the same in fresh project with $env/dynamic/private it happens in a module in the lib/server folder
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"]
Yeah this doesn't work at all with new project:
- Root
tsconfig.json
, which extends"./.svelte-kit/tsconfig.json"
-
.svelte-kit
tsconfig.json includesambient.d.ts
-
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
?
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 withinsrc
?
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.