Playing nice with SvelteKit

[acoyfellow]

First of all, thanks for this library. I've been using it in production for a while now with Sapper.

Testing SvelteKit out, i notice that you get a SSR error out of the box: https://svelte.dev/blog/whats-the-deal-with-sveltekit

How to reproduce:

• follow sveltekit install steps.
• add svelte-feather-icons to project

• try to import icon as usage intend

  you'll see a <CheckCircleIcon> is not a valid SSR component. error.

  This does not happen with the snowpack 3.0 + svelte hello world out of the box, though. I'm hoping we can get this library + sveltekit to play nice. Likely it's going to be a config setup? But, in any case, dropping this here for other minds to stumble upon.

• I've tried linking to the icons in different ways (import CheckCircleIcon from "svelte-feather-icons/src/icons/CheckCircleIcon.svelte";) - produces same ssr error
• I can get it working in dev only by mounting the folder by mounting './node_modules/svelte-feather-icons/src/icons': '/_icons' + alias'ing $icons: './node_modules/svelte-feather-icons/src/icons', then importing with import CheckCircleIcon from "$icons/CheckCircleIcon.svelte"; -- but this does not build with sveltekit

[acoyfellow]

I also notice this problem is the exact same as svelte-hero-icons out of the box (ssr error). So, my apologies if this isn't the right place for this discussion. But, I'm now wondering what I can do to help fix this experience within svelte-feather-icons for sveltekit, potentially before it even releases.

[dylanblokhuis]

Testing this locally I also noticed that many other built Svelte components on NPM are having issues with this. I assume this is an issue within SvelteKit.

[peterszerzo]

Sapper throws the same error:

500
<FrownIcon> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

Error: <FrownIcon> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
    at validate_component (/Users/peterszerzo/Documents/projects/nlx/vc-template-3/node_modules/svelte/internal/index.mjs:1343:18)
    at /Users/peterszerzo/Documents/projects/nlx/vc-template-3/__sapper__/dev/server/server.js:233:7
    at Object.$$render (/Users/peterszerzo/Documents/projects/nlx/vc-template-3/node_modules/svelte/internal/index.mjs:1366:23)
    at Object.default (/Users/peterszerzo/Documents/projects/nlx/vc-template-3/__sapper__/dev/server/server.js:297:42)
    at /Users/peterszerzo/Documents/projects/nlx/vc-template-3/__sapper__/dev/server/server.js:168:34
    at Object.$$render (/Users/peterszerzo/Documents/projects/nlx/vc-template-3/node_modules/svelte/internal/index.mjs:1366:23)
    at Object.default (/Users/peterszerzo/Documents/projects/nlx/vc-template-3/__sapper__/dev/server/server.js:295:59)
    at /Users/peterszerzo/Documents/projects/nlx/vc-template-3/__sapper__/dev/server/server.js:157:166
    at Object.$$render (/Users/peterszerzo/Documents/projects/nlx/vc-template-3/node_modules/svelte/internal/index.mjs:1366:23)
    at /Users/peterszerzo/Documents/projects/nlx/vc-template-3/__sapper__/dev/server/server.js:294:56

As far as I understand, these frameworks would need compiled components instead of Svelte files to work with SSR - so in this light I don't think it's a Sapper/SvelteKit issue.

[dylanblokhuis]

Sapper throws the same error:

500
<FrownIcon> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

Error: <FrownIcon> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
    at validate_component (/Users/peterszerzo/Documents/projects/nlx/vc-template-3/node_modules/svelte/internal/index.mjs:1343:18)
    at /Users/peterszerzo/Documents/projects/nlx/vc-template-3/__sapper__/dev/server/server.js:233:7
    at Object.$$render (/Users/peterszerzo/Documents/projects/nlx/vc-template-3/node_modules/svelte/internal/index.mjs:1366:23)
    at Object.default (/Users/peterszerzo/Documents/projects/nlx/vc-template-3/__sapper__/dev/server/server.js:297:42)
    at /Users/peterszerzo/Documents/projects/nlx/vc-template-3/__sapper__/dev/server/server.js:168:34
    at Object.$$render (/Users/peterszerzo/Documents/projects/nlx/vc-template-3/node_modules/svelte/internal/index.mjs:1366:23)
    at Object.default (/Users/peterszerzo/Documents/projects/nlx/vc-template-3/__sapper__/dev/server/server.js:295:59)
    at /Users/peterszerzo/Documents/projects/nlx/vc-template-3/__sapper__/dev/server/server.js:157:166
    at Object.$$render (/Users/peterszerzo/Documents/projects/nlx/vc-template-3/node_modules/svelte/internal/index.mjs:1366:23)
    at /Users/peterszerzo/Documents/projects/nlx/vc-template-3/__sapper__/dev/server/server.js:294:56

As far as I understand, these frameworks would need compiled components instead of Svelte files to work with SSR - so in this light I don't think it's a Sapper/SvelteKit issue.

The components are compiled if you import them normally e.g. import { XIcon } from 'svelte-feather-icons'

[peterszerzo]

It is what I'm doing in this example. So steps to reproduce:

• start new sapper project.
• npm i --save svelte-feather-icons.
• in src/routes/index.svelte, add import import { CameraIcon } from 'svelte-feather-icons'.
• render the <CameraIcon /> in the same file.
• refresh the page to see the error above.

[dylanblokhuis]

I just tested with https://github.com/sveltejs/kit and the package works fine.

[acoyfellow]

It has to be listed under deps not devDeps, and latest SK works

[bhargawananbhuyan]

Use sveltekit-feather-icons. It’s a small package and works well with SvelteKit.