search

hperrin / svelte-material-ui

Svelte Material UI Components
https://sveltematerialui.com/
Apache License 2.0
3.28k stars 288 forks source link

Error of Unknown file extension ".svelte" in SvelteKit #608

Open The-Real-Thisas opened 1 year ago

The-Real-Thisas commented 1 year ago

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:

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

but I get this ??

Screenshot 2023-06-22 at 11 48 10 PM

Desktop (please complete the following information):

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 commented 1 year ago

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