dylanblokhuis/svelte-feather-icons

Playing nice with SvelteKit

Closed this issue · 8 comments

acoyfellow commented

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 commented

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 commented

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.

  • 👍1
peterszerzo commented

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 commented

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 commented

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 commented

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

  • ❤️1
acoyfellow commented

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

  • 👍1
  • 🎉1
bhargawananbhuyan commented

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