Flag 'importsNotUsedAsValues' is deprecated and will stop functioning in TypeScript 5.5

[gornostay25]

READ HERE HOW TO FIX IT

#8650 (comment)

Bug report

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

[Rich-Harris]

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?

[dummdidumm]

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

[gornostay25]

@Rich-Harris

[thenbe]

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

[dummdidumm]

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.

[gornostay25]

@ambiguous48

[engageintellect]

Getting the same error when init-ing Tailwind to a fresh "npm create svelte@latest"

[petermekhaeil]

Related: microsoft/TypeScript#52203

[jrmoynihan]

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:

[orbh]

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.

[madeleineostoja]

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

[dummdidumm]

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.

[madeleineostoja]

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

[dummdidumm]

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

[saumya66]

in VSCode, you can

this helped!

[DaBigBlob]

im not even on 5.x still this is an issue;

[dummdidumm]

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

[Nick-Mazuk]

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.

[Nick-Mazuk]

Here's the ESBuild issue that tracks adding the verbatimModuleSyntax TS option, which will eventually help resolve this issue.

evanw/esbuild#3019

[PeterPCW]

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:

[cmidkiff87]

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

[ivanhofer]

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

[nickmura]

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

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```

[ivanhofer]

@nickmura maybe try to upgrade to the latest SvelteKit version.

[nickmura]

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 <#8650 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWCHILWTSAFVNCE6VJFXU7TXMHST3ANCNFSM6AAAAAAUCPPSGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[temeddix]

Using the 'workspace' typescript version is just a workaround, and this needs to be changed on the Svelte side I believe.

[PeterPCW]

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

[dummdidumm]

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.

[PeterPCW]

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

[dummdidumm]

Unfortunately there is no way that I know of to reset a config to nothing.
It's a breaking change for SvelteKit because we would need to bump the minimum TypeScript version to set this. We could try to detect the TS version in the workspace but that may be brittle. And we also would need to check that Vite/ESbuild is on a version that supports the verbatimModuleSyntax flag.

[benmccann]

Added to esbuild in 0.18: https://github.com/evanw/esbuild/blob/main/CHANGELOG.md#0180

[benmccann]

Done here: e3d6b99

I accidentally pushed it to the version-2 branch instead of PRing it. I didn't include a changeset since we already have a changeset for the TypeScript 5 upgrade, which I think is all we'd want

[coyotte508]

Just a note that after upgrading to TS 5.5, we needed to set verbatimModuleSyntax: true in tsconfig.json for @sveltejs/package (version: 2.3.1([email protected])([email protected])) to produce correct CJS exports

In case anybody else encounters this issue

[dummdidumm]

That's expected because starting with TS5.5 the old options cease to function (they do nothing anymore)

[coyotte508]

That's expected because starting with TS5.5 the old options cease to function (they do nothing anymore)

indeed upgrading @sveltejs/kit to the latest version (for an up-to-date .svelte-kit/tsconfig.json) also fixes the issue, sorry for the noise