Resolve issue with SSR in Svelte Kit

[dextermb]

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).

svelte-hero-icons need to export pkg.svelte to provide a hint for vite-plugin-svelte to handle Svelte libraries in SSR. vite-plugin-svelte would essentially add svelte-hero-icons to ssr.noExternal, so as a workaround for now you can do that too by setting config.kit.vite.ssr.noExternal: ['svelte-hero-icons'], but ideally the fix should be in svelte-hero-icons, so I'll close this issue for now.

Are you able to implement the suggested fix?

[JustinVoitel]

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

[JustinVoitel]

@dextermb I just tested:

1. init new sveltekit project with npm init svelte@next app
2. install svelte-hero-icons as dev dep with pnpm i -D svelte-hero-icons
3. example code:

<script lang="ts">
  import { AcademicCap, Icon } from "svelte-hero-icons";
</script>

<Icon src={AcademicCap} size="1rem" />

Is the exact reproduction failing for you ?

[dextermb]

@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

[JustinVoitel]

@dextermb can you try svelte-hero-icons@next and check if it is working now ?

[dextermb]

@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]

@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.

[JustinVoitel]

@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!

[dextermb]

@JustinVoitel Without the alias it does seem to work. This potentially suggests that it's an issue with vite.

[JustinVoitel]

Alright this seems to be the reason ^^

What was the reason behind the alias ? I never used anything like this :D

[dextermb]

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.

[JustinVoitel]

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 component. And I fixed the naming of the heroicons set, e.g you would use it like this:

'''svelte
import {Icon} from "@steeze-ui/svelte-icon"
import {Plus} from "@steeze-ui/heroicons"

...
'''

[bluwy]

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 sveltejs/vite-plugin-svelte#293