Sveltekit incompatability?
Doomd opened this issue · comments
Installing svelte-fa using pnpm install svelte-fa -D
and using the following code for a component:
<!-- Logo.svelte -->
<script>
import Fa from "svelte-fa"
import { faCookie } from "@fortawesome/free-solid-svg-icons"
</script>
<Fa icon={faCookie} />
and then running npm run dev
and navigating to localhost:3000
...
will result in this error:
[vite] Error when evaluating SSR module /src/lib/Logo.svelte:
/Users/bc/Projects/SvelteKit/node_modules/.pnpm/svelte-fa@2.2.0/node_modules/svelte-fa/src/fa.svelte:1
<script>
^
SyntaxError: Unexpected token '<'
at wrapSafe (internal/modules/cjs/loader.js:979:16)
at Module._compile (internal/modules/cjs/loader.js:1027:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)
at nodeRequire (/Users/bc/Projects/SvelteKit/node_modules/.pnpm/vite@2.1.2/node_modules/vite/dist/node/chunks/dep-efe32886.js:68907:17)
at ssrImport (/Users/bc/Projects/SvelteKit/node_modules/.pnpm/vite@2.1.2/node_modules/vite/dist/node/chunks/dep-efe32886.js:68865:20)
at eval (/src/lib/Logo.svelte:7:31) (x2)
Here's my package.json:
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-brands-svg-icons": "^5.15.3",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@sveltejs/adapter-node": "next",
"@sveltejs/adapter-static": "next",
"@sveltejs/kit": "next",
"@tailwindcss/jit": "^0.1.5",
"autoprefixer": "^10.2.5",
"cssnano": "^4.1.10",
"postcss": "^8.2.8",
"postcss-load-config": "^3.0.1",
"postcss-preset-env": "^6.7.0",
"svelte": "^3.35.0",
"svelte-preprocess": "^4.6.9",
"tailwindcss": "^2.0.4",
"tslib": "^2.1.0",
"svelte-fa": "^2.2.0",
"typescript": "^4.2.3",
"vite": "^2.1.2"
},
"type": "module",
"engines": {
"node": ">= 12.17.0"
}
}
Hey,
I just tested this and it works if you import the Fa component like this:
import Fa from "svelte-fa/src/fa.svelte";