How to Handle module Script Exports from .svelte Files in TypeScript

Description

Learn why TypeScript cannot directly import named exports from Svelte module scripts and how to work around it by using intermediate TypeScript files. --- This video is based on the question https://stackoverflow.com/q/79475758/ asked by the user 'munHunger' ( https://stackoverflow.com/u/3566441/ ) and on the answer https://stackoverflow.com/a/79476273/ provided by the user 'José Ramírez' ( https://stackoverflow.com/u/13886104/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions. Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: can't import from svelte module from typescript Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/licensing The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/by-sa/4.0/ ) license. If anything seems off to you, please feel free to drop me a comment under this video. --- The Challenge: TypeScript Doesn't Recognize Named Exports from Svelte Module Scripts When working with Svelte components in a TypeScript project, you might use the <script lang="ts" module> block inside .svelte files to export functions or variables at the module level: [[See Video to Reveal this Text or Code Snippet]] From a Svelte perspective, you can import this named export elsewhere: [[See Video to Reveal this Text or Code Snippet]] However, TypeScript throws an error because it doesn't understand these exports: [[See Video to Reveal this Text or Code Snippet]] Why Does This Happen? Svelte’s TypeScript definitions for .svelte files do not include named exports from module scripts. The .svelte module declarations generated by Svelte’s tooling only account for default exports (the component itself). Therefore, TypeScript sees no named export hello in the module and complains. Current Workarounds Use an Intermediate .ts File One practical solution is to: Export your functions or variables from the .svelte file’s module script. Create a separate .ts file that imports these from the .svelte component and then re-exports them. For example: [[See Video to Reveal this Text or Code Snippet]] Then import from exports.ts in your TypeScript code: [[See Video to Reveal this Text or Code Snippet]] This method works because TypeScript fully understands .ts module exports and can generate proper type definitions. Package Your Component as an NPM Library If you are developing reusable Svelte components intended for distribution, creating .d.ts definition files through TypeScript compilation on intermediate .ts re-exports is the recommended approach. Summary TypeScript currently cannot natively recognize named exports from <script module lang="ts"> inside .svelte files. The best practical approach is to create a TypeScript file that imports from your Svelte component and re-exports the desired members. This ensures TypeScript has valid typings and prevents errors during compilation. Stay tuned for improvements in Svelte’s tooling; future updates may enhance TypeScript support for module-level exports.