Typescript error: ...not assignable to type 'typeof SvelteComponentDev'

[JoshuaDietz]

Hi guys
I don't know what changed but since a while Typescript is complaining about the data type of the components when defining the routes. I define my routes like this:

<Router url="">
...
    <Route path="chats" component="{ChatList}" />
...
</Router>

And I get the following error:

Type 'typeof ChatList__SvelteComponent_' is not assignable to type 'typeof SvelteComponentDev'.
  Types of construct signatures are incompatible.
    Type 'new (options: ComponentConstructorOptions<{ location: any; }>) => ChatList__SvelteComponent_' is not assignable to type 'new (options: IComponentOptions<Record<string, any>>) => SvelteComponentDev'.
      Types of parameters 'options' and 'options' are incompatible.
        Type 'IComponentOptions<Record<string, any>>' is not assignable to type 'ComponentConstructorOptions<{ location: any; }>'.
          Types of property 'props' are incompatible.
            Property 'location' is missing in type 'Record<string, any>' but required in type '{ location: any; }'.js(2322)

What causes this and how can I fix this? A while ago, it worked fine and now I have this problem for every component so I don't think that something is wrong with the components in general.

Thank you!

[kryptus36]

Can you post your package.json and tsconfig?

[JoshuaDietz]

Sure!

package.json:

{
  "name": "my-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "binary-sorted-array": "^1.0.4",
    "jdenticon": "^3.2.0",
    "randomcolor": "^0.6.2",
    "svelte-routing": "^1.6.0",
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
    "@types/node": "^18.7.14",
    "svelte": "^3.44.0",
    "svelte-ionicons": "^0.2.1",
    "vite": "^2.9.9"
  }
}

Strangely, there is no tsconfig in the app, but what I have is a jsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "node",
    "target": "esnext",
    "module": "esnext",
    /**
     * svelte-preprocess cannot figure out whether you have
     * a value or a type, so tell TypeScript to enforce using
     * `import type` instead of `import` for Types.
     */
    // deprecated in newer typescript versions: "importsNotUsedAsValues": "error",
    "isolatedModules": true,
    "resolveJsonModule": true,
    /**
     * To have warnings / errors of the Svelte compiler at the
     * correct position, enable source maps by default.
     */
    "sourceMap": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    /**
     * Typecheck JS in `.svelte` and `.js` files by default.
     * Disable this if you'd like to use dynamic types.
     */
    "checkJs": true
  },
  /**
   * Use global.d.ts instead of compilerOptions.types
   * to avoid limiting type declarations.
   */
  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}

[kryptus36]

try adding

"types": ["svelte"]

to your compilerOptions.

Not sure what it means that you have a jsconfig instead of tsconfig. But give it a shot.

[krishnaTORQUE]

This issue has been fixed in latest version of svelte-routing.

[andirady]

How was this resolved? I'm still having this issue in version 1.11.0.

[kryptus36]

If I'm not mistaken, this is a breaking change from Svelte 3 -> 4. It's a bit awkward, if you have deps that still rely on Svelte 3 as the latest versions of this project are Svelte 4 compatible from a typing perspective.

My suggestion for @krishnaTORQUE would be to adjust the versioning so 1.x is svelte 3 compatible and 2.x is Svelte 4 compatible. Then, once Svelte 3 is sufficiently old, drop support for it.