Cweili / svelte-fa

Tiny FontAwesome component for Svelte

Home Page:https://cweili.github.io/svelte-fa/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Sveltekit incompatability?

Doomd opened this issue · comments

commented

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";