How do I fix issues with Storybook, Svelte, and TypeScript Interfaces
Oct 14,
posted by Jeffry Houser
I'm working on a Svelte Library, that imports a TypeScript library. The TypeScript library has an interface, which is used in a Svelte component. When using this setup in a Svelte application, everything worked great.
However, I was trying to write some Storybook stories for the Svelte-Lib component, and was getting this error like this:
The requested module '/node_modules/.cache/storybook/longnumericalstring/vite/deps/my-typescript-lib; does not provide an export named of a "MyInterface"
My svelte component had a line like this:
2 import {
3 MyClass1,
4 MyClass2,
5 MyInterface
6 } from my-typescript-lib
7</script>
First, I had complete control of the typescript library, and can guarantee that the interface was exported properly.
As I said earlier, Svelte loved this line and was able to process this as a Svelte component w/ no issues.
But, for some reason, Storybook did not like that. It broke all my storybook stories, even if I deleted the stories that referenced the component that used the interface.
After some iteration, I found a new way to import the interface:
2 import {
3 MyClass1,
4 MyClass2,
5 } from my-typescript-lib
6 import type {
7 MyInterface
8 } from my-typescript-lib
9</script>
Instead of using a normal input, I had to add the 'type' keyword to import the interface. Then Storybook started working fine. I didn't have to change how the library exported the interfaces, or the tsconfig, or the vite config. I just had to change how the interface was imported.
Svelte worked fine with change too.
Live and learn. I hope this helps someone.
posted by Jeffry Houser in
Svelte, Professional, TypeScript, Storybook
| 0 Comments
