svelte-icons-pack icon indicating copy to clipboard operation
svelte-icons-pack copied to clipboard

TypeScript: Type resolution problem

Open Dan1ve opened this issue 11 months ago • 1 comments

Thank you for creating this amazing library!

I have a question regarding TypeScript support. When I use the library as specified by the docs...

<script lang="ts">
	import { Icon } from 'svelte-icons-pack';
	import { FaCircleQuestion } from 'svelte-icons-pack/fa';
</script>


<Icon src={FaCircleQuestion} /> 

I get a TypeScript error for the import of the src icon (FaCircleQuestion in this example):

Cannot find module 'svelte-icons-pack/fa' or its corresponding type declarations.ts(2307)

Interestingly, the type resolution error goes away when I reference the dist subfolder:

import { FaCircleQuestion } from 'svelte-icons-pack/dist/fa';

but this doesn't work (crashes at runtime). Can this be resolved somehow?

I'm using version 3.1.1.

For reference, here is my tsconfig.json :

{
	"extends": "./.svelte-kit/tsconfig.json",
	"compilerOptions": {
		"moduleResolution": "node",
		"module": "ESNext",
		"lib": ["es2020", "DOM"],
		"target": "ESNext",
		"isolatedModules": true,
		"resolveJsonModule": true,
		"sourceMap": true,
		"esModuleInterop": true,
		"skipLibCheck": true,
		"strict": true,
		"forceConsistentCasingInFileNames": true,
		"allowJs": true,
		"checkJs": true,
		"noImplicitOverride": true,
		"paths": {
			"$lib": ["./src/lib"],
			"$lib/*": ["./src/lib/*"],
			"$model": ["./src/model"],
			"$utils/*": ["./src/svelte-utils/*"]
		}
	},
	"include": [
		"src/**/*.d.ts",
		"src/**/*.js",
		"src/**/*.ts",
		"src/**/*.svelte",
		"src/external-types.d.ts"
	]
}

Dan1ve avatar Mar 29 '24 13:03 Dan1ve

Figured it out. This happens when

"moduleResolution": "node"

is used in tsconfig.json.

With SvelteKit's default

"moduleResolution": "bundler"

everything works as expected. Nevermind :wink:

Dan1ve avatar Mar 29 '24 13:03 Dan1ve