Skip to content

problem with type-only imports for typescript #1092

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

Closed
betfix opened this issue Jul 9, 2021 · 2 comments
Closed

problem with type-only imports for typescript #1092

betfix opened this issue Jul 9, 2021 · 2 comments
Labels
bug Something isn't working

Comments

@betfix
Copy link

betfix commented Jul 9, 2021

I noticed a problem with syntax highlighting, auto-import, svelte-check and Quick Fix options for importing Typescript types.

E.g. for this code

<script lang="ts">
import { Link } from 'svelte-navigator'
export let navigate: NavigateFn
</script> 
  1. auto-import
    During typing the word "NavigateFn" intellisense displays a tooltip to auto-import this type from svelte-navigator. The auto-import adds the type to existing import, resulting in:
    import { Link, NavigateFn } from 'svelte-navigator'

  2. Quick Fix
    The same happens when choosing a Quick Fix option to add NavigateFn to existing import (this is the only option to choose).

  3. syntax highlighting
    All is looking ok inside VSCode, despite adding a compiler option in tsconfig.json:
    "importsNotUsedAsValues": "error"
    Setting this option to "remove" or "preserve" seems to have no impact on VSCode behavior, either.

  4. svelte-check
    No error

During runtime there is an error:

SyntaxError: The requested module '/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/svelte-navigator/src/index.js' does not provide an export named 'NavigateFn'

The expected behavior is to:

  1. either display an error inside VSCode and in svelte-check, according to the "importsNotUsedAsValues": "error" typescript setting

  2. or make auto-import and Quick Fix use type-only import for types, resulting in code:

import { Link } from 'svelte-navigator'
import type { NavigateFn } from 'svelte-navigator'
@betfix betfix added the bug Something isn't working label Jul 9, 2021
@dummdidumm
Copy link
Member

The problem is within svelte-preprocess. Since svelte-preprocess only knows the content of the script, it does not know whether something is a type or a value import, so you need to strictly separate them. TypeScript can't help here because it's okay with import as long as there's at least one value import.
See sveltejs/svelte-preprocess#318 for more info and a possible way to fix this.
Keeping this open for visibility

@dummdidumm
Copy link
Member

dummdidumm commented Sep 5, 2021

This is fixed with the latest version of svelte-preprocess (you need at least Svelte 3.39 along with it), therefore closing this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants