Using Svelte with Vite: Unable to import the Writable<T> interface for writable store in TypeScript

Question

Using Svelte with Vite: Unable to import the Writable<T> interface for writable store in TypeScript

Within a Svelte project that was scaffolded using Vite, I am attempting to create a Svelte store in Typescript. However, I am encountering difficulties when trying to import the Writable<T> interface as shown in the code snippet below:

import { Writable, writable, derived } from 'svelte/store';

Upon doing so, an error is displayed in the browser console stating:

Uncaught SyntaxError: The requested module '/node_modules/.vite/svelte_store.js?v=16f52463' does not provide an export named 'Writable'.

Is there a solution available for importing the Writable<T> interface in this particular configuration?

typescript svelte vite

Answer 1

Answer №1

To utilize the Writable module from 'svelte/store', use the following syntax:

import type { Writable } from 'svelte/store';

.

Note: Starting from TypeScript 4.5, you can streamline your imports into a single line. Instead of importing each module separately like this:

import type { Writable } from 'svelte/store';
import { writable, derived } from 'svelte/store';

You can now combine them into one line like so:

import { type Writable, writable, derived } from 'svelte/store';

Answer 2

To utilize the Writable module from 'svelte/store', use the following syntax:

import type { Writable } from 'svelte/store';

.

Note: Starting from TypeScript 4.5, you can streamline your imports into a single line. Instead of importing each module separately like this:

import type { Writable } from 'svelte/store';
import { writable, derived } from 'svelte/store';

You can now combine them into one line like so:

import { type Writable, writable, derived } from 'svelte/store';

Using Svelte with Vite: Unable to import the Writable<T> interface for writable store in TypeScript

Answer №1

Similar questions

What is the process for generating a new type that includes the optional keys of another type but makes them mandatory?

Can someone explain the meaning of this syntax in a TypeScript interface?

Issue encountered while deploying Firebase Functions: Unable to parse function triggers

Issue with constructor including an interface

The testString's dependencies are unresolved by Nest

Introduce a specialized hierarchical data structure known as a nested Record type, which progressively ref

When utilizing a Service through UserManager, the User variable may become null

Set up your Typescript project to transpile code from ES6 to ES5 by utilizing Bable

Issue encountered when importing a font in TypeScript due to an error in the link tag's crossorigin

Is there a way to dynamically shift arrow key focus onto buttons in Angular using the left and right arrow keys?

The object might be undefined; TypeScript; Object

Transferring an event to a component nested two levels deep

Can you explain the mechanics behind Angular Component CSS encapsulation?

Struggling with the TypeScript generic syntax for the GroupBy function

What is the command line method for running ESLint in flat configuration?

Encountering an error when trying to import a node module in an Angular TypeScript file. The module

The Angular7 counterpart of the C# attribute decorator

What is the correct way to extract a value from a keyvalue pair?

Sending a parameter to a route guard

Trouble with accessing Dynamic StyleSheet properties based on type restrictions