Typescript: Exported members from Svelte modules cannot be detected from Typescript files

[bryanmylee]

Describe the bug
When using Typescript, exported properties from a component's context="module" script can be imported in another .svelte file, but cannot be imported in a regular .ts file.

<!-- Page.svelte -->
<script lang="ts" context="module">
  export const version = '1.0';
</script>

<!-- App.svelte -->
<script lang="ts">
  import { version } from './Page.svelte'; // works fine
</script>

// index.ts
import { version } from './Page.svelte'; // [tsserver 2614] [E] Module '"*.svelte"' has no exported member 'version'. Did you mean to use 'import version from "*.svelte"' instead?

Logs

[tsserver 2614] [E] Module '"*.svelte"' has no exported member 'version'. Did you mean to use 'import version from "*.svelte"' instead?

To Reproduce
Issue does not exist with Javascript Svelte, and cannot be reproduced on https://svelte.dev/repl.

Issue can be reproduced in this repository.

https://github.com/bryanmylee/svelte-ts-module-export

It is still possible to compile the code with Rollup despite the Typescript errors, however this breaks the build step when using Sapper and Webpack with Typescript.

Expected behavior
Import should work even from .ts file.

Stacktraces
On a Sapper project with Webpack and Typescript:

✗ server /Users/bryan/Projects/Programs/bryanmylee.github.io/src/node_modules/@my/components/PageTransitions/index.ts ./src/node_modules/@my/components/PageTransitions/index.ts [tsl] ERROR in /Users/bryan/Projects/Programs/bryanmylee.github.io/src/node_modules/@my/components/PageTransitions/index.ts(3,10) TS2614: Module '"*.svelte"' has no exported member 'version'. Did you mean to use 'import version from "*.svelte"' instead? ✗ client /Users/bryan/Projects/Programs/bryanmylee.github.io/src/node_modules/@my/components/PageTransitions/index.ts ./src/node_modules/@my/components/PageTransitions/index.ts [tsl] ERROR in /Users/bryan/Projects/Programs/bryanmylee.github.io/src/node_modules/@my/components/PageTransitions/index.ts(3,10) TS2614: Module '"*.svelte"' has no exported member 'version'. Did you mean to use 'import version from "*.svelte"' instead?

Information about your Svelte project:

  System:
    OS: macOS 11.0.1
    CPU: (8) x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
    Memory: 454.03 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.4.0 - ~/.nvm/versions/node/v14.4.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.9 - ~/.nvm/versions/node/v14.4.0/bin/npm
  Browsers:
    Chrome: 87.0.4280.88
    Edge: 87.0.664.66
    Firefox: 81.0.1
    Safari: 14.0.1
  npmPackages:
    svelte: ^3.17.3 => 3.31.0
    typescript: ^4.0.3 => 4.1.3
    webpack: ^4.7.0 => 4.44.2

Severity
Medium severity.

I can workaround this by moving context="module" exports to a Typescript file instead. However, it does break my design pattern of putting all sub-components of a component in a folder, and re-exporting the main component and its interfaces via a index.ts file.

[dummdidumm]

It's only the typing that's wrong here, you are able to use the imports like you want.

Reason: Svelte files are declared like this in the Svelte type definitions:

declare module '*.svelte' {
    export { SvelteComponentDev as default } from 'svelte/internal';
}

This means "Dear TypeScript, if you see a file ending with .svelte in .ts or .js files, use that definition". That definition does not contain other exports, so TypeScript says "that is wrong", even if it's right in your case.
To fix it, you can provide your own declaration inside a .d.ts file:

declare module '*.svelte' {
    export { SvelteComponentDev as default } from 'svelte/internal';
    export const version: string;
    // ... other stuff
}

@Conduitry maybe we could relax the module declaration and just do declare module '*.svelte';. Everything is typed as any then - the disadvantage is that we no longer have a typed default export then. Maybe someone else knows how to get the best of both worlds.

[bryanmylee]

That clears it up a lot, thank you.

I would love to contribute somehow to developing a Typescript version of the documentation, or a journal of best practices with Typescript + Svelte. I’m beginning to feel bad using the issue tracker so much to discover Typescript + Svelte features.

[bryanmylee]

This actually reminds me of #442 on sveltejs/language-tools. Basically figuring out a better way to get support for advanced Component definitions such as generics.

[thebestgin]

I have spent several hours on this problem.
It is a pity that there is no clean and simple solution for such a primitive problem.
I don't like the idea with an extra file (.d.ts), because I have to map my logic in it or lose type safety.

The following solution works in most of my use cases.
Maybe it also helps you.

1. Create a file with extension '.svelte' like
   'some-file.ts.svelte'
2. Wrap your js code like

<script context="module" lang="ts">
  export const foo:string = "bar";
</script>

3. Import it in another js file or svelte file like
   import { foo } from "./js/some-file.ts.svelte";

[dummdidumm]

As stated above, this is a "TypeScript interop with non-TypeScript-files" issue. Solving it for VS Code required writing a dedicated TypeScript plugin, which is now available. More info here: sveltejs/language-tools#580 (comment)
Closing in favor of that linked issue as this is not directly related to Svelte, rather the tooling around it.

[NickDarvey]

@bryanmylee, I don't suppose you have any insights as to why this works with rollup but not webpack?

[dummdidumm]

When using webpack or rollup with Svelte it's best to turn off their type checker and use svelte-check instead, as it is has knowledge of the whole program, not just TypeScript files. The alternative is to use the workaround I described above #5817 (comment)

[NickDarvey]

Okay, I guess I misinterpreted the closing of this issue.

When using webpack or rollup with Svelte it's best to turn off their type checker and use svelte-check

I'll try this approach. Thanks @dummdidumm.

[Alexandre-Fernandez]

When using webpack or rollup with Svelte it's best to turn off their type checker and use svelte-check instead, as it is has knowledge of the whole program, not just TypeScript files. The alternative is to use the workaround I described above #5817 (comment)

How do you turn off type cheking from the rollup config ? if you remove @rollup/plugin-typescript the app will not build.

I use typescript-svelte-plugin (via Svelte VS Code extension) and it works well when coding.
However when building I get the following error (from @rollup/plugin-typescript in the terminal) when trying to export a class from a .svelte component module context into a .ts file (store) :

(!) Plugin typescript: @rollup/plugin-typescript TS2614: Module '"*.svelte"' has no exported member 'Product'. Did you mean to use 'import Product from "*.svelte"' instead?

src/stores/products.ts: (2:10)

2 import { Product } from "../components/Product.svelte"

[dummdidumm]

You can make the build ignore errors (it will still show them but not abort) https://github.com/rollup/plugins/tree/master/packages/typescript/#noemitonerror

[Alexandre-Fernandez]

Thanks, since typescript-svelte-plugin can resolve the modules correctly do you know if there is a way for rollup to do so ?