svelte-icons-pack
svelte-icons-pack copied to clipboard
TypeScript: Type resolution problem
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"
]
}
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: