Unknown file extension ".svelte"

[dreamscached]

Hi! Using Svelte 3.44.0 (with SvelteKit and TypeScript), tried to use this library I have successfully used in the past but it keeps failing with the following error (looks like a duplicate of #14 but I manage to reproduce it over and over):

Unknown file extension ".svelte" for /home/dreamscached/.../project/node_modules/@steeze-ui/svelte-icon/Icon.svelte
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /home/dreamscached/.../project/node_modules/@steeze-ui/svelte-icon/Icon.svelte
    at new NodeError (node:internal/errors:372:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
    at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
    at defaultLoad (node:internal/modules/esm/load:21:20)
    at ESMLoader.load (node:internal/modules/esm/loader:407:26)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:326:22)
    at new ModuleJob (node:internal/modules/esm/module_job:66:26)
    at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:345:17)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:304:34)
    at async ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:82:21)

Basically:

1. Create a new SvelteKit project with npm create svelte@latest
2. Pick TypeScript syntax when asked
3. Install this library with npm i -D @steeze-ui/icons
4. Use it in any .svelte file:

   <script lang="ts">
      import { Icon } from "@steeze-ui/svelte-icon"
      import { Sun } from "@steeze-ui/heroicons"
   </script>
   
   <div class="w-screen">
      <div class="flex flex-row-reverse w-full">
    	  <button class="rounded-full">
    		  <Icon src="{Sun}" theme="solid" class="color-gray-900" />
    	  </button>
      </div>
   </div>

[dreamscached]

Update: looks like it was my mistake adding it as devDependency, adding as regular dependency solves the issue. Sorry for the false alarm.

[jj0b]

Ran into this issue as well. The docs specify to install with -D to make them devDependencies but that leads to the above problem. Not sure if I'm missing something, but perhaps the README files should be updated?

[rizqyhi]

Hi, I also got the same error, even though I've made sure to install it not as devDependencies. I don't know what happened, but after some page changes and reload, it worked fine.

Update: turns out it works fine only after page routing (I use sveltekit). If I reload the page, the error always occurs.
Update: I don't really get the why, but found this comment on @sveltejs/kit and now it works fine.