Closed dextermb closed 2 years ago
Is there any documentation or example on how to implement it the right way ?
As far as I understand it correctly the package already has the pkg.svelte attribute set in version 4.0.3:
{
...
"svelte": "./index.js",
...
}
@dextermb I just tested:
npm init svelte@next app
pnpm i -D svelte-hero-icons
<script lang="ts">
import { AcademicCap, Icon } from "svelte-hero-icons";
</script>
Is the exact reproduction failing for you ?
@JustinVoitel Please take a look at my example repository:
dextermb/bug-hero-icons-svelte-kit
I'm using Svelte Kit using JS not TS so that might be an issue.
However as mentioned in the initial bug thread it only has been happening in the recent Svelte Kit versions.
If you don't feel it's an issue with your Heroicons package then feel free to comment there to get them to investigate further
@dextermb can you try svelte-hero-icons@next and check if it is working now ?
@dextermb can you try svelte-hero-icons@next and check if it is working now ?
Unfortunately still getting the issue. Here's the stack:
SvelteKit v1.0.0-next.294
local: http://localhost:3000
network: not exposed
Use --host to expose server to other devices on this network
14:44:16 [vite] Error when evaluating SSR module /src/routes/index.svelte:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /Users/dexter/projects/svelte/hero-icons-svelte-kit/node_modules/.pnpm/svelte-hero-icons@4.1.0-next.0/node_modules/svelte-hero-icons/Icon.svelte
at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:71:15)
at Loader.getFormat (internal/modules/esm/loader.js:102:42)
at Loader.getModuleJob (internal/modules/esm/loader.js:231:31)
at async ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:58:21)
at async Promise.all (index 1)
at async link (internal/modules/esm/module_job.js:63:9)
Unknown file extension ".svelte" for /Users/dexter/projects/svelte/hero-icons-svelte-kit/node_modules/.pnpm/svelte-hero-icons@4.1.0-next.0/node_modules/svelte-hero-icons/Icon.svelte
This was created by using dextermb/bug-hero-icons-svelte-kit.
@dextermb can you try svelte-hero-icons@next and check if it is working now ?
Unfortunately still getting the issue. Here's the stack:
SvelteKit v1.0.0-next.294
local: http://localhost:3000
network: not exposed
Use --host to expose server to other devices on this network
14:44:16 [vite] Error when evaluating SSR module /src/routes/index.svelte:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for /Users/dexter/projects/svelte/hero-icons-svelte-kit/node_modules/.pnpm/svelte-hero-icons@4.1.0-next.0/node_modules/svelte-hero-icons/Icon.svelte
at Loader.defaultGetFormat [as _getFormat] (internal/modules/esm/get_format.js:71:15)
at Loader.getFormat (internal/modules/esm/loader.js:102:42)
at Loader.getModuleJob (internal/modules/esm/loader.js:231:31)
at async ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:58:21)
at async Promise.all (index 1)
at async link (internal/modules/esm/module_job.js:63:9)
Unknown file extension ".svelte" for /Users/dexter/projects/svelte/hero-icons-svelte-kit/node_modules/.pnpm/svelte-hero-icons@4.1.0-next.0/node_modules/svelte-hero-icons/Icon.svelte
This was created by using dextermb/bug-hero-icons-svelte-kit.
@dextermb I tried your project and could bring it to work replacing this in package.json
:
"svelte-heroicons": "npm:svelte-hero-icons@^4.0.3",
with
"svelte-hero-icons": "next",
and in index.svelte
you change the import to:
import { Icon, Home } from 'svelte-hero-icons';
Please try this out!
@JustinVoitel Without the alias it does seem to work. This potentially suggests that it's an issue with vite
.
Alright this seems to be the reason ^^
What was the reason behind the alias ? I never used anything like this :D
Alright this seems to be the reason ^^
What was the reason behind the alias ? I never used anything like this :D
The "Hero icons" branding is all one word haha (heroicons).
I've commented back on the Svelte Kit issue so hopefully they'll look into why the alias is causing the error.
Ahh yea that was my mistake ^^ when I initialized the project I didn't look at the correct wording 😅
Also if you didn't know: I created a successor library (actually libraries) to this package where you can use multiple Icon sets with the same
'''svelte import {Icon} from "@steeze-ui/svelte-icon" import {Plus} from "@steeze-ui/heroicons"
... '''
Looks like it's a bug in vite-plugin-svelte
, my bad with the pkg.svelte
assumption. This can be closed now and be tracked at https://github.com/sveltejs/vite-plugin-svelte/issues/293
Hi
I raised a bug with Svelte Kit where issues were happening when attempting to SSR. You can find the bug thread here (sveltejs/vite-plugin-svelte#293).
Are you able to implement the suggested fix?