Error of Unknown file extension ".svelte" in SvelteKit

Question

Error of Unknown file extension ".svelte" in SvelteKit

Opened this issue a year ago · 12 comments

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

This fixed it: hperrin/svelte-material-ui#375 (comment)

Answer 1 · 2023-08-13T18:56:01.000Z

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

Answer 2 · 2023-08-14T12:10:50.000Z

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

Answer 3 · 2023-08-14T18:15:14.000Z

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.

Answer 4 · 2023-08-21T16:23:35.000Z

@Schum123 Any news on this ? Thanks

Answer 5 · 2023-08-22T07:55:39.000Z

I will fix this. Hopefully this week.

Answer 6 · 2023-08-23T11:43:05.000Z

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

Answer 7 · 2023-08-23T13:34:47.000Z

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

Answer 8 · 2023-08-23T13:36:12.000Z

@KaKi87 Could you send me you package.json?

Answer 9 · 2023-08-26T15:17:38.000Z

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"
}

Answer 10 · 2023-09-22T22:36:02.000Z

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'
}

Answer 11 · 2023-10-14T18:32:25.000Z

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

Answer 12 · 2023-11-13T10:05:42.000Z

Instead of this:

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

use this:

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