javascripttypescriptsveltesveltekit

Error when importing svelte.ts into a .svelte file

I'm working on an Svelte application and trying to setup a rune "state" storage in its own separate file so it can be reused, but when trying to import on a .svelte component, I get a compilation error.

"Svelte: Module './TopBar.svelte' has no exported member menuButtonVisible"

// TopBar.svelte.ts
export const menuButtonVisible = $state(false);

// TopBar.svelte
<script lang="ts">
...
import { menuButtonVisible } from './TopBar.svelte';
...
</script>

I'm basically trying to do the same as explained over here https://svelte.dev/docs/svelte/stores#When-to-use-stores

Note that when I import regular .ts files, I don't get that error. So, it looks like there should be some configuration missing to process .svelte.ts files? https://svelte.dev/docs/svelte/svelte-js-files

Solution

  • If there also is a component with the same prefix, you need to supply an extension as well. Auto-imports can get this wrong.

    import { menuButtonVisible } from './TopBar.svelte.js';

    You can also import './TopBar.svelte.ts' if you enable it in the tsconfig.json via allowImportingTsExtensions.