Component props are broken after adding svelte-routing

This issue has been tracked since 2021-06-15.

Error

When running svelte-check, after installing svelte-routing I receive an error like the following:

====================================
Loading svelte-check in workspace: /code/application
Getting Svelte diagnostics...

/code/application/src/Welcome.svelte:29:23
Error: Type '{ prop: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'prop' does not exist on type 'IntrinsicAttributes'. (ts)
    <MyComponent prop="value" />

====================================
svelte-check found 1 error, 0 warnings, and 0 hints

Repro steps

  1. Install Svelte template and setup Typescript
npx degit sveltejs/template example && cd example
node scripts/setupTypescript.js
yarn
  1. Add src/MyComponent.svelte with contents:
<script lang="ts">
  export let prop: string = '';
</script>

<div>{prop}</div>
  1. Replace src/App.svelte with contents:
<script lang="ts">
  import MyComponent from './MyComponent.svelte';
</script>

<MyComponent prop="value" />
  1. Run svelte-check: verify checks pass
yarn run check
  1. Install svelte-routing
yarn add svelte-routing
  1. Run svelte-check: verify checks no longer pass
yarn run check

Alternative repro:

You can clone this repo here and see the differences in running between HEAD and HEAD~1: https://github.com/rjschie/svelte-routing-issue-example

Proposed solutions

We can simply update the svelte2tsx dependency to at least version 0.2.0, but since it's only used in here for its type, and this is likely to happen again, I'd say you could keep it as latest in package.json instead of locking to a version.

Temporary workarounds

To workaround this, in the meantime, one can install svelte2tsx at the latest in their own application to update the declaration files.

rjschie wrote this answer on 2021-06-15

I wonder if, instead of doing an actual import, you could do a TS reference of the svelte2tsx library at the top?

- import 'svelte2tsx/svelte-jsx';
+ /// <reference types="svelte2tsx/svelte-jsx" /> 

You might have to coincide that with changing the svelte2tsx package to being a devDependency instead of dependency too, but I'm not entirely sure on that.

More Details About Repo
Owner Name EmilTholin
Repo Name svelte-routing
Full Name EmilTholin/svelte-routing
Language JavaScript
Created Date 2017-11-28
Updated Date 2022-12-03
Star Count 1711
Watcher Count 21
Fork Count 151
Issue Count 59

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date