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

Tips for saving a variable in Angular that is being received through a subscription as JSON:

Injecting singletons in a circular manner with Inversify

`When attempting to use Typescript with Electron, the error 'exports is not defined

Refining strings to enum keys in TypeScript

Determine the data type based on the object property

Creating a number of arrays based on the row of a .CSV file can be accomplished in Angular by utilizing the

Verify the completeness of data types within an array in typescript

Activate the event when the radio button is changed

Sign up for the identical Observable within a Child Component in Angular 2 using TypeScript

Creating a custom autocomplete search using Angular's pipes and input

axios.get consistently delivers a Promise of type <Pending>

searchByTextContentUnderListItemAnchorTag

What benefits does Observable provide compared to a standard Array?

Strategies for effectively choosing this specific entity from the repository

Utilize Typescript to expand the functionality of the Express Request object

Utilizing Generic Types for Object Parameters

Tips for aligning the types of objects transmitted from a Web API backend to a React/Redux frontend

Using boolean value as default input value in React

Error in Typescript: The type 'Element' does not have a property named 'contains'

React - The `component` prop you have supplied to ButtonBase is not valid. Please ensure that the children prop is properly displayed within this customized component