Error of Unknown file extension ".svelte" in SvelteKit

[The-Real-Thisas]

Describe the bug
The @smui/linear-progress package in particular gives,

Unknown file extension ".svelte" for /Users/thisas/Desktop/Project Auroa/dashboard/node_modules/@smui/linear-progress/dist/LinearProgress.svelte
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /Users/thisas/Desktop/Project Auroa/dashboard/node_modules/@smui/linear-progress/dist/LinearProgress.svelte
    at new NodeError (node:internal/errors:399:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:74:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:114:38)
    at defaultLoad (node:internal/modules/esm/load:81:20)
    at nextLoad (node:internal/modules/esm/loader:164:28)
    at ESMLoader.load (node:internal/modules/esm/loader:600:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:452:22)
    at new ModuleJob (node:internal/modules/esm/module_job:64:26)
    at #createModuleJob (node:internal/modules/esm/loader:475:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:429:34

Similar to: Error of Unknown file extension ".svelte" in SvelteKit #375 BUT limited to this one package, the rest work fine.

To Reproduce
Steps to reproduce the behavior:

• Use Following Versions
  • "svelte": "^3.54.0",
  • "smui-theme": "^7.0.0-beta.8",
  • "@sveltejs/kit": "^1.5.0",
  • "@smui/linear-progress": "^7.0.0-beta.9",

Expected behavior
It will work like the demo in the docs.

but I get this ??

Desktop (please complete the following information):

• OS:Version 13.3.1 (a) (22E772610a)
• Browser: Brave
• Version: Version 1.51.114 Chromium: 113.0.5672.92 (Official Build) (arm64)

Using it almost exactly as the example shows.

<script>
	// material ui components
	import DataTable, { Head, Body, Row, Cell, Label, SortValue, Pagination } from '@smui/data-table';
	import Select, { Option } from '@smui/select';
	import IconButton from '@smui/icon-button';
	import Wrapper from '@smui/touch-target';
	import Fab from '@smui/fab';
	import { Icon } from '@smui/common';
	import {LinearProgress} from '@smui/linear-progress';
</script>

<datatable>

...

<LinearProgress
   indeterminate
   bind:closed={page_loading}
   aria-label="Data is being loaded..."
   slot="progress"/>

</datatable>

[intfract]

Error

The same thing happened when I did import Snackbar from '@smui/snackbar' in my sveltekit project.

Problem

Vite needs to optimise your dependencies. You need run npm run dev again after you have installed a new @smui component.

Solution

• Install your new components first
• Stop the vite development server
• Rerun npm run dev