svelte-spa-router typescript problematic types after "wrapping" the route

57 views Asked by At

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.

0

There are 0 answers