sveltejs
Flag 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5
Describe the bug
My VScode show this in problems tab
Flag 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5. Specify 'ignoreDeprecations: "5.0"' to silence this error.
Use 'verbatimModuleSyntax' instead.
.svelte-kit/tsconfig.json
{
"compilerOptions": {
"paths": {
"$lib": [
"../src/lib"
],
"$lib/*": [
"../src/lib/*"
]
},
"rootDirs": [
"..",
"./types"
],
/////////////////////////////////////////////////////////////////////
"importsNotUsedAsValues": "error",
/////////////////////////////////////////////////////////////////////
"isolatedModules": true,
"preserveValueImports": true,
"lib": [
"esnext",
"DOM",
"DOM.Iterable"
],
"moduleResolution": "node",
"module": "esnext",
"target": "esnext"
},
"include": [
...
],
"exclude": [
...
]
}
Reproduction
"devDependencies": {
"@sveltejs/adapter-cloudflare": "^1.1.0",
"@sveltejs/kit": "^1.2.2",
"@typescript-eslint/eslint-plugin": "^5.48.2",
"@typescript-eslint/parser": "^5.48.2",
"eslint": "^8.32.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-svelte3": "^4.0.0",
"prettier": "^2.8.3",
"prettier-plugin-svelte": "^2.9.0",
"svelte": "^3.55.1",
"svelte-adapter-bun": "file:../svelte-adapter-bun",
"svelte-check": "^3.0.2",
"tslib": "^2.4.1",
"typescript": "^4.9.4",
"vite": "^4.0.4",
"wrangler": "^2.8.0"
},
Logs
No response
System Info
System:
OS: Windows 10 10.0.22621
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Memory: 1.79 GB / 7.91 GB
Binaries:
Node: 19.4.0 - C:\Program Files\nodejs\node.EXE
npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.22621.1105.0), Chromium (109.0.1518.49)
npmPackages:
@sveltejs/adapter-cloudflare: ^1.1.0 => 1.1.0
@sveltejs/kit: ^1.2.2 => 1.2.2
svelte: ^3.55.1 => 3.55.1
vite: ^4.0.4 => 4.0.4
Severity
annoyance
Additional Information
No response
Weird, I have the latest VSCode with TypeScript 4.9.4 (same as your version, according to your npxinfo) and I'm not seeing this. If I change it to verbatimModuleSyntax I do get an error. Are there any other steps to reproduce?
Likely because OP is using the beta version of TS 5.0, where that flag is introduced. I'm not sure how to proceed. I think the safest would be to switch this for SvelteKit 2.0 while bumping the minimum required TS version. I believe vite/esbuild both use that now deprecated flag for compilation, so directly changing it likely breaks things
@Rich-Harris
@gornostay25 If you right click the bottom right corner (next to where it says prettier), does it show you more info about your typescript setup?
I guess another thing is to add said ignoreDeprecations flag. I'm not sure if we can add that for 4.9 without it being an error, we'd need to test that out.
That flag is still available until 5.5, which is more than one year from now. I suspect we have SvelteKit 2.0 by then at which point we can switch flags.
Getting the same error when init-ing Tailwind to a fresh "npm create svelte@latest"
For anyone who has the 5.0.0 beta version installed in VSCode, you can simply swap the workspace over to 4.9.4 to remove the errors for now:
Click the TS banner in your status bar, then "Switch Version":
Select v4.9.x for the workspace:
For me error was removed after disabling the JavaScript and TypeScript Nightly extension in VS Code. But yeah you could probably also change the TS-version in your workspace.
The TS 5 beta introduced a few deprecation flags that sveltekit relies on, preserveValueImports is another one. It's also a huge win for sveltekit is monorepos though, since it finally allows extends in tsconfig to be an array, so you can consume a shared tsconfig as well as the locally generated sveltekit tsconfig, which is why I'm yolo'ing it with the beta.
It would be really great for sveltekit to aim to support TS 5 as soon as a stable release ships in march for that reason alone, I (and I imagine most monorepo projects) have had to totally ignore sveltekit's awesome generated types until now
AFAIK we're dependent on Esbuild and Vite supporting those first since it affects how they transpile the code, so they need to support it first. Since our peer dependency is on a Vite version lower than the one that will support it, we also need additional checks to stay backwards compatible, else it's a breaking change.
That makes sense, and I also just stumbled upon the typescript option in config, which must have been added since the last time I tried to get sveltekit's generated types working in my monorepo. That config option both solves my main use-case for TS 5 now, and would I assume be deprecated by the extends: string[] tsconfig format in TS 5, so migrating to TS 5 in sveltekit 2.0 (and removing that config option) makes sense in that case
The includes array and other stuff is not deep-merged when extending, which is why we decided to go with that option even in light of the upcoming extends array
But your vs code is very likely using typescript 5.0, which is why you get the warning. Either tell vs code to use the workspace typescript version or upgrade to 5.0, or add the ignoreDeprecations flag as the warning suggests. Either of those will silence it
As a band-aid fix, you can ignore deprecation warnings if you're getting this error:
{
"compilerOptions": {
"ignoreDeprecations": "5.0",
}
}
Of course, ignore deprecation warnings at your own risk.
Here's the ESBuild issue that tracks adding the verbatimModuleSyntax TS option, which will eventually help resolve this issue.
https://github.com/evanw/esbuild/issues/3019
Para mim o erro foi solucionado assim que eu desabilitei a extensão do TS.
I was getting this same error in VS Code on line 1 of tsconfig.json, didn't even set importsNotUsedAsValues:
The mentions of a VS Code package sent me looking, adding this one removed the error:
I made a python script that gets rid of the error, in the meantime. It's very simplistic, but it does the job.
As written, the python script sits in the project root
python script
#!/bin/env python
from pathlib import Path
import re
import time
dir = Path(__file__).resolve().parent
file = dir / '.svelte-kit/tsconfig.json'
patterns = [
r'^\s+"importsNotUsedAsValues".+$\n',
r'^\s+"preserveValueImports".+$\n',
]
def loop():
while True:
check_and_remove()
time.sleep(60)
def check_and_remove():
text = file.read_text()
if _check(text):
_remove(text)
print('Removed bad values')
else:
print('Bad values not found')
def _remove(text):
for p in patterns:
text = re.sub(p, '', text, flags=re.MULTILINE)
file.write_text(text)
def _check(text):
return any([
re.search(p, text, flags=re.MULTILINE)
for p in patterns
])
if __name__ == '__main__':
loop()
And the set up a background task in vscode to automatically run the script
tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "Fix tsconfig",
"type": "process",
"command": "./stupid_error.py",
"isBackground": true,
"runOptions": {
"runOn": "folderOpen"
},
"presentation": {
"echo": true,
"reveal": "never",
"focus": false,
"panel": "shared",
"showReuseMessage": true,
"clear": false
},
}
]
}
@ivanhofer It is a bad hack. I'm just using it until the issue is resolved upstream
Edit: actually, now that I've actually read your reply, that is a much slicker fix
@cmidkiff87 looks like a bad hack.
There is an option to alter the tsconfig.json that SvelteKit produces:
https://kit.svelte.dev/docs/configuration#typescript
In one of my projects this looks like this:
import adapter from '@sveltejs/adapter-auto'
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
typescript: {
config: (tsconfig) => {
const {
// destructure properties we don't want
importsNotUsedAsValues: _,
preserveValueImports: __,
// keep the rest in a single object
...compilerOptions
} = tsconfig.compilerOptions
return {
...tsconfig,
compilerOptions: {
...compilerOptions,
},
}
},
},
},
}
export default config
Note: I have removed my project specific configs, but haven't tested it out with the exact config as above. Maybe you need to slighlty adjust it.
@cmidkiff87 looks like a bad hack.
There is an option to alter the
tsconfig.jsonthatSvelteKitproduces: https://kit.svelte.dev/docs/configuration#typescriptIn one of my projects this looks like this:
import adapter from '@sveltejs/adapter-auto' /** @type {import('@sveltejs/kit').Config} */ const config = { kit: { adapter: adapter(), typescript: { config: (tsconfig) => { const { // destructure properties we don't want importsNotUsedAsValues: _, preserveValueImports: __, // keep the rest in a single object ...compilerOptions } = tsconfig.compilerOptions return { ...tsconfig, compilerOptions: { ...compilerOptions, }, } }, }, }, } export default configNote: I have removed my project specific configs, but haven't tested it out with the exact config as above. Maybe you need to slighlty adjust it.
typescript value on .kit is now missing, and cannot start development environment
import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';
/** @type {import('@sveltejs/kit').Config} */
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess({ postcss: true }),
kit: {
//trailingSlash: 'always',
typescript: {
config: (tsconfig) => {
const {
//destructure properties we don't want
importsNotUsedAsValues: _,
preserveValueImports: __,
//keep the rest in a single object
...compilerOptions
} = tsconfig.compilerOptions
return {
...tsconfig,
compilerOptions: {
...compilerOptions,
},
}
},
},
}
};
export default config;
Error: Unexpected option config.kit.typescript```
that’s a great idea
On Tue, Jun 20, 2023 at 12:19 PM Hofer Ivan @.***> wrote:
@nickmura https://github.com/nickmura maybe try to upgrade to the latest SvelteKit version.
— Reply to this email directly, view it on GitHub https://github.com/sveltejs/kit/issues/8650#issuecomment-1599286342, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWCHILWTSAFVNCE6VJFXU7TXMHST3ANCNFSM6AAAAAAUCPPSGQ . You are receiving this because you were mentioned.Message ID: @.***>
Using the 'workspace' typescript version is just a workaround, and this needs to be changed on the Svelte side I believe.
@temeddix do you know what the fix is? I wasn't using Svelte so I could implement and verify locally.
The VSCode package update I mentioned above only helped for a bit, I'm back to seeing this warning now.
What is this error about
This is a deprecation warning from Typescript (not SvelteKit or anything else). Certain settings are deprecated but they will continue to work until TypeScript version 5.5. We can't update them without this being a breaking change so we'll do that in SvelteKit 2.0.
The error is a bit confusing because it can come from both your VS Code installation (if you use one that has TypeScript 5.0 or higher bundled with it) and/or your SvelteKit project.
How to fix it
You have two options:
Option 1: Update packages
Update your package.json:
- update TypeScript to version 5.0 or higher
- update SvelteKit to version 1.3.1 or higher
Then install and afterwards rerun npm run dev which will regenerate the base tsconfig which contains a fix for this (it will add "ignoreDeprecations": "5.0" to the generated base tsconfig).
Option 2: Use TS workspace version
If you're using a TypeScript version lower than 5 in your project and don't want to update for some reason, then tell VS Code to use the workspace version of TypeScript.
@dummdidumm do you already know what the breaking change needs to be? That is what I was trying to ask, what do I need to change in the code so that I am no longer using the deprecated setting?
Allowing deprecated settings seems like just a workaround, especially if it won't continue past TS 5.5.
I switched to "import type" for everything that isn't explicitly used per TS1371. I added "verbatimModuleSyntax" to tsconfig as per the error message. I never had importsNotUsedAsValues set, so I didn't need to remove it for TS5101.
EDIT: Dang it. It took digging back to that screenshot to see the "extends", plasmo is setting importsNotUsedAsValues so it's their fault.
Is there a way for me to override and reset that setting? Otherwise I'd have to copy/paste the rest of their file and remove the extends to drop that setting right?