When using svelte-spa-router in Svelte, VSCode is complaining when I try to use a wrap function for a route and then specify component/asyncComponent inside wrap - it does not complain when I use it basically like this:
/* correct imports... */
const routes = {
'/': Home,
'/counter': Counter
};
1] scenario:
import {wrap} from 'svelte-spa-router/wrap';
import Home from './lib/pages/Home.svelte';
import Counter from './lib/pages/Counter.svelte';
const routes = {
'/': Home,
'/counter': wrap({
component: Counter,
}),
};
Type 'typeof Counter__SvelteComponent_' is not assignable to type 'typeof SvelteComponent'.
Types of construct signatures are incompatible.
Type 'new (options: ComponentConstructorOptions<Record<string, never>>) => Counter__SvelteComponent_' is not assignable to type 'new <Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any>(options: ComponentConstructorOptions<Props>) => SvelteComponent<...>'.
Types of parameters 'options' and 'options' are incompatible.
Type 'ComponentConstructorOptions<Props>' is not assignable to type 'ComponentConstructorOptions<Record<string, never>>'.
Type 'Props' is not assignable to type 'Record<string, never>'.
Type 'Record<string, any>' is not assignable to type 'Record<string, never>'.
'string' index signatures are incompatible.
Type 'any' is not assignable to type 'never'.ts(2322)
2] scenario:
import {wrap} from 'svelte-spa-router/wrap';
import Home from './lib/pages/Home.svelte';
const routes = {
'/': Landing,
'/counter': wrap({
asyncComponent: import('./lib/pages/Counter.svelte'),
}),
};
Type 'Promise<typeof import("/svelte/src/lib/pages/Counter.svelte")>' is not assignable to type 'AsyncSvelteComponent'.
Type 'Promise<typeof import("/svelte/src/lib/pages/Counter.svelte")>' provides no match for the signature '(): Promise<{ default: typeof SvelteComponent; }>'.ts(2322)
(I edited paths for 2nd scenario, so normally it would start with /home/something/...)
My dev dependencies:
"devDependencies": {
"@sveltejs/vite-plugin-svelte": "^2.4.2",
"@tsconfig/svelte": "^5.0.2",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.24",
"postcss-load-config": "^4.0.1",
"svelte": "^4.2.3",
"svelte-check": "^3.6.0",
"svelte-spa-router": "^4.0.0",
"tailwindcss": "^3.3.2",
"tslib": "^2.6.2",
"typescript": "^5.2.2",
"vite": "^5.0.0"
}
I tried searching for this issue but I haven't find any. Also I tried some hacky solutions via typescript "as" keyword, but with no success.