Typescript complains

[PavelJacoboGonzalez]

Hello
I'm currently implementing iconify for a small project with Sveltekit, I'm learning also Sveltekit, but when I try to use it as per documentation I'm getting following typescript error. I have checked documentation but I could not find reference to how to use iconify and typescript.

please check image below.

I've been following documentation for iconify + svelte and my Svelte app is using typescript.

tscondig.json

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"allowJs": true,
		"checkJs": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"resolveJsonModule": true,
		"skipLibCheck": true,
		"sourceMap": true,
		"strict": true,
		"module": "NodeNext",
		"moduleResolution": "NodeNext",
	}
}

svelte.config.js

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter(),
		alias: {
			$root: 'src'
		}
	}
};

export default config;

Thanks so much

regards

[cyberalien]

I have similar code in this repository in SvelteKit demo: https://github.com/iconify/iconify/blob/main/components-demo/sveltekit-demo/src/lib/header/Header.svelte

But I'm not seeing any errors.

Can you create a basic reproduction?

[userquin]

try importing @iconify/svelte in src/app.d.ts: check for example unplugin-icons Svelte usage in SvelteKit, Frameworks section

[PavelJacoboGonzalez]

Hello, Thanks so much for the feed back. I've installed sveltekit from scratch, I install Iconify and it's still happening.
I've created this repo. It's actually happening here: https://github.com/PavelJacoboGonzalez/iconify_test/tree/development

• https://github.com/PavelJacoboGonzalez/iconify_test.git

At first I thought it was due to Svelte for Vscode extension, but not 100% sure about it.

Thanks for feedback

Regards

[userquin]

can you add import '@iconify/svelte'; before L3 and restart VSCode window?: https://github.com/PavelJacoboGonzalez/iconify_test/blob/development/src/app.d.ts#L3

https://github.com/unplugin/unplugin-icons/blob/main/examples/sveltekit/src/app.d.ts#L1

[userquin]

@cyberalien Svelte 4 has changed the defintiion, you're using Svelte 3, for Svelte 4 you need to change to this one:
https://github.com/unplugin/unplugin-icons/blob/main/types/svelte4.d.ts#L9-L10

[cyberalien]

Thanks! So I need to release new package for Svelte 4... on it.

[cyberalien]

Try @iconify/svelte@next, which should install version 4.0.0-beta.2

Seems to work correctly in my tests with latest Svelte 4. I'm in process of doing more tests, but most likely will finish testing only tomorrow.

[userquin]

@PavelJacoboGonzalez you need to use bundler module resolution, tested in your repro with @iconify/svelte@next and VSCode and Intellij (JetBrains) working with auto complete ("@iconfy/svelte": "next" then "yarn && yarn check" after updating tsconfig.json file):

[PavelJacoboGonzalez]

Awesome. Working as @userquin suggested.

"module": "ESNext",
"moduleResolution": "Bundler"

Thanks so much for support.
Really appreciate
Regards