Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Component props are broken after adding svelte-routing #211

Open
rjschie opened this issue Jun 15, 2021 · 1 comment
Open

Component props are broken after adding svelte-routing #211

rjschie opened this issue Jun 15, 2021 · 1 comment

Comments

@rjschie
Copy link

rjschie commented Jun 15, 2021

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
Copy link
Author

rjschie commented Jun 15, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant