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

🐛 BUG: check says type import from Svelte file not found #796

Open
danielclausmeyer opened this issue Feb 14, 2024 · 4 comments
Open
Labels
- P3: minor bug An edge case that only affects very specific usage (priority) feat: svelte Related to the Svelte integration (scope)

Comments

@danielclausmeyer
Copy link

Describe the Bug

We got a component library with Svelte components. Those are build and packed using "svelte-package". For each .svelte file it creates a .svelte.d.ts file with the component type class and the props, events and slots.

In a TypeScript file i am importing one of those prop types with import type { Props } from '@org/package/component/Component.svelte'. astro check complains since version 0.5.0 that this Props is not exported from the file. It definitely is exported.

import type {Props} from '@org/package/component/Component.svelte'

/* Console output */

error ts(2614): Module '"@org/package/component/Component.svelte"' has no exported member 'Props'. Did you mean to use 'import Props from "@org/package/component/Component.svelte"' instead?

import type {Props} from '@org/package/component/Component.svelte'
             ~~~~~

I could also use the barrel file export of the component and then use the ComponentProps util type from svelte, but even then astro check complains about problems that do not actually exist.

import {Component} from '@org/package/component'
import type { ComponentProps } from 'svelte'

type Props = ComponentProps<Component>

/* Console output */

- error ts(2749): 'Component' refers to a value, but is being used as a type here. Did you mean 'typeof Component'?

type Props = ComponentProps<Component>
                            ~~~~~~~~~
- error ts(6133): 'Component' is declared but its value is never read.

import {Component} from '@org/package/component'
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Why would astro check run checks on any file except .astro files anyway?

Steps to Reproduce

  1. npm init astro using template framework-svelte
  2. Change the Counter.svelte to export the count variable.
<script lang="ts">
	export let count = 0;
        /* ... */
</script>
  1. Add a TypeScript file that uses the type of this component.
import type { ComponentProps } from "svelte";
import type Counter from "./components/Counter.svelte";

type Props = ComponentProps<Counter>

const props: Props = {
  count: 5
}

console.log(props)
  1. Run npx tsc --noEmit - It does not show errors
  2. Run npx astro check
  3. Should not throw error but shows this:
npx astro check
13:45:56 [vite] Forced re-optimization of dependencies
13:45:56 [check] Getting diagnostics for Astro files in /workspaces/vofficeGmbh/test/superior-sphere...
src/file.ts:4:29 - error ts(2749): 'Counter' refers to a value, but is being used as a type here. Did you mean 'typeof Counter'?

4 type Props = ComponentProps<Counter>
                              ~~~~~~~
src/file.ts:2:1 - warning ts(6133): 'Counter' is declared but its value is never read.

2 import type Counter from "./components/Counter.svelte";
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Result (5 files): 
- 1 error
- 0 warnings
- 1 hint
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Feb 14, 2024
@danielclausmeyer
Copy link
Author

In the steps to reproduce i only how to reproduce the second error i described. For the first one i would need to add svelte-package and a build step and etc. Though I guess both errors have the same source/reason, so i hope this is enough.

@Princesseuh
Copy link
Member

Did this work in previous versions? I feel like that most likely never really worked

@Princesseuh Princesseuh added - P3: minor bug An edge case that only affects very specific usage (priority) feat: svelte Related to the Svelte integration (scope) and removed needs triage Issue needs to be triaged labels Feb 14, 2024
@danielclausmeyer
Copy link
Author

Indeed I cant reproduce it working with any version now. In our project there are no problems with version 0.4.1 and below. The problems start with version 0.5.0.

But when i try it with a clean install like in the steps to reproduce i can not get it to work with the same versions. Though the code is valid and should not throw errors either way.

Why does astro check check TS files?

@Princesseuh
Copy link
Member

Princesseuh commented Feb 14, 2024

Indeed I cant reproduce it working with any version now. In our project there are no problems with version 0.4.1 and below. The problems start with version 0.5.0.

But when i try it with a clean install like in the steps to reproduce i can not get it to work with the same versions. Though the code is valid and should not throw errors either way.

Why does astro check check TS files?

There are multiple reasons, notably that we can provide Astro specific diagnostics and it's one of the few ways to support checking in the CLI .ts(x) files that import Astro components.

Since doing those checks is a very expensive process, doing it in one command is generally super beneficial performance wise as well, not to mention the memory usage.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P3: minor bug An edge case that only affects very specific usage (priority) feat: svelte Related to the Svelte integration (scope)
Projects
None yet
Development

No branches or pull requests

2 participants