Error of Unknown file extension ".svelte" in SvelteKit

[schum123]

Error of Unknown file extension ".svelte" in SvelteKit

[Schum123]

I will fix this. Hopefully this week.

[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.

[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?

[KaKi87]

@Schum123 Any news on this ? Thanks

[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';