Error of Unknown file extension ".svelte" in SvelteKit

[Gutza]

Using SvelteKit with Typescript, and I received the error in the title immediately upon importing the Circle.

This fixed it: https://github.com/hperrin/svelte-material-ui/issues/375#issuecomment-991419187

[ulfaslak]

How do you deal with it? Simply inserting those lines into the package.json of svelte-loading-spinners didn't change anything for me.

[dmdin]

I have the same issue. Are there any fixes before library update?

[ulfaslak]

So the simple "fix" is that if you only need a few kind of spinners, you can simply copy the components into your project $lib/components and just import them from there. Bit of a sad hack but it works.

[KaKi87]

@Schum123 Any news on this ? Thanks

[Schum123]

I will fix this. Hopefully this week.

[Schum123]

I just tried this using latest SvelteKit and it works for me.

[KaKi87]

Yet it didn't for me, that's precisely why I asked. Thanks

[Schum123]

@KaKi87 Could you send me you package.json?

[w3rafu]

Hello, I am getting this error as well.

Here is my package config: { "name": "x", "version": "0.0.1", "private": true, "scripts": { "dev": "vite dev", "build": "vite build", "preview": "vite preview", "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch" }, "devDependencies": { "@sveltejs/adapter-auto": "^2.0.0", "@sveltejs/kit": "^1.20.4", "prettier": "^3.0.2", "prettier-plugin-svelte": "^3.0.3", "svelte": "^4.0.5", "svelte-check": "^3.4.3", "svelte-loading-spinners": "^0.3.4", "typescript": "^5.0.0", "vite": "^4.4.2" }, "type": "module" }

[Rdk1229]

Getting this same issue...

5:10:56 PM [vite] Error when evaluating SSR module /src/routes/+page.svelte: failed to import "svelte-loading-spinners"
|- TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for D:\Webstorm_projects\project\node_modules\svelte-loading-spinners\Circle.svelte

Internal server error: Unknown file extension ".svelte" for D:\Webstorm_projects\project\node_modules\svelte-loading-spinners\Circle.svelte { code: 'ERR_UNKNOWN_FILE_EXTENSION' }

[sirbots]

I got it working by just manually creating the component file I wanted, type file, and utils.ts file in my project.

[Tichss]

Instead of this:

import { Circle } from 'svelte-loading-spinners';

use this:

import Circle from 'svelte-loading-spinners/Circle.svelte';