svelte-routing icon indicating copy to clipboard operation
svelte-routing copied to clipboard

Component props are broken after adding svelte-routing

Open rjschie opened this issue 3 years ago • 1 comments

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 avatar Jun 15 '21 00:06 rjschie

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.

rjschie avatar Jun 15 '21 00:06 rjschie