FaLayers & FaLayersText not working with sveltekit

[cananda]

Hello!

Thank you for this project which makes using fontawesome a breeze! While importing and displaying free svg icons work great, I have had no success with FaLayers and FaLayersText as shown in the examples. Here is my code ..

<script lang="ts">
	import Fa from 'svelte-fa';
	import FaLayers from 'svelte-fa';
	import FaLayersText from 'svelte-fa';
	import { faFlag } from '@fortawesome/free-solid-svg-icons/faFlag';
	import { faCalendar } from '@fortawesome/free-solid-svg-icons/faCalendar';
	import { faCertificate } from '@fortawesome/free-solid-svg-icons/faCertificate';
	import { faBookmark } from '@fortawesome/free-solid-svg-icons/faBookmark';
	import { faHeart } from '@fortawesome/free-solid-svg-icons/faHeart';
</script>

<div class="px-8 py-4">
	<Fa icon={faFlag} size="2x" color="tomato" />

	<FaLayers size="4x" style="background: mistyrose">
		<Fa icon={faCalendar} />
		<FaLayersText
			scale={0.45}
			translateY={0.06}
			color="white"
			style="font-weight: 900"
			icon={faCalendar}
		>
			27
		</FaLayersText>
	</FaLayers>

	<Fa icon={faCertificate} size="4x" style="background: mistyrose" color="blue" />

	<FaLayers size="4x" style="background: mistyrose">
		<Fa icon={faCertificate} size="2x" color="blue" />
		<FaLayersText scale={0.25} rotate={-30} color="white" style="font-weight: 900">
			NEW
		</FaLayersText>
	</FaLayers>

	<FaLayers size="4x" style="background: mistyrose">
		<Fa icon={faBookmark} />
		<Fa icon={faHeart} scale={0.4} translateY={-0.1} color="tomato" />
	</FaLayers>

	<FaLayers size="4x" pull="left">
		<Fa icon={faCertificate} />
		<FaLayersText scale={0.25} rotate={-30} color="white" style="font-weight: 900">
			NEW
		</FaLayersText>
	</FaLayers>
</div>

Only the <Fa .. /> icons work and none of the <FaLayers .. /> icons with the layers are displayed. I'm only using the free fontawesome 6.2.0 icons

[Guillaume S]

I was just trying overlay in svelte/Vite , same problem with layers.

Uncaught SyntaxError: The requested module '/node_modules/svelte-fa/src/fa.svelte' does not provide an export named 'FaLayers' (at ButtonManual.svelte? [sm]:2:14)

however importing separately works:
import Fa from 'svelte-fa'
import FaLayers from 'svelte-fa/src/fa-layers.svelte'
import FaLayersText from 'svelte-fa/src/fa-layers-text.svelte'

[Long Nguyen]

You're not importing it properly

import Fa, { FaLayers, FaLayersText } from "svelte-fa";

Please read the README

[Jim Olsen]

That still doesn't fix it for me:

3: import {faBoltLightning} from "@fortawesome/free-solid-svg-icons";
4: import Fa, {FaLayers, FaLayersText} from "svelte-fa";
^
5: </script>
6:

Error: 'FaLayersText' is not exported by node_modules/svelte-fa/src/fa.svelte, imported by src/components/lightning/LightningDashboard.svelte

BTW, following this pattern does in fact work:

import Fa from 'svelte-fa'
import FaLayers from 'svelte-fa/src/fa-layers.svelte'
import FaLayersText from 'svelte-fa/src/fa-layers-text.svelte'

[Caidan Williams]

Just to add onto this, trying to import with SvelteKit:

import Fa, { FaLayers } from "svelte-fa";

does not work and throws the error:

Error: <FaLayers> 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. Otherwise you may need to fix a <FaLayers>.
    at Module.validate_component (/Users/caidan/Projects/doggit/node_modules/svelte/internal/index.mjs:2019:15)
    at eval (/Users/caidan/Projects/doggit/src/routes/app/dashboard/dogs/[id]/+page.svelte:55:248)
    at Object.$$render (/Users/caidan/Projects/doggit/node_modules/svelte/internal/index.mjs:2042:22)
    at Object.default (/Users/caidan/Projects/doggit/.svelte-kit/generated/root.svelte:116:150)
    at eval (/Users/caidan/Projects/doggit/src/routes/app/dashboard/dogs/[id]/+layout.svelte:93:32)
    at Object.$$render (/Users/caidan/Projects/doggit/node_modules/svelte/internal/index.mjs:2042:22)
    at Object.default (/Users/caidan/Projects/doggit/.svelte-kit/generated/root.svelte:105:141)
    at eval (/Users/caidan/Projects/doggit/src/routes/app/dashboard/+layout.svelte:75:123)
    at Object.$$render (/Users/caidan/Projects/doggit/node_modules/svelte/internal/index.mjs:2042:22)
    at Object.default (/Users/caidan/Projects/doggit/.svelte-kit/generated/root.svelte:93:137)

Although, importing this way does work:

import FaLayers from 'svelte-fa/src/fa-layers.svelte';

but then I get a typescript error:

Could not find a declaration file for module 'svelte-fa/src/fa-layers.svelte'. '/Users/caidan/Projects/doggit/node_modules/svelte-fa/src/fa-layers.svelte' implicitly has an 'any' type.ts (7016)

[Long Nguyen]

Seems like the exports in package.json isn't configured properly. Svelte picks up on the svelte field, which only points to the main .svelte file, not the index file.

[Caidan Williams]

Thanks for the info, would changing the svelte field to src/index.js fix this, or would there need to be more changes?

[Cweili]

Try v4.x which is built with SvelteKit.