1

I've been trying to add Fontawesome to a Vue 3 project but it is breaking the app.

When I try to import the fontawesome nodemodules I get a network 504 failure.

In main.js

I try to import the library as follows:

/* import the fontawesome core */
import { library } from '@fortawesome/fontawesome-svg-core'

/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

/* import specific icons */
import { faUserSecret } from '@fortawesome/free-solid-svg-icons'

This breaks the app and when I check the Network tab I see that my the path to these resources is set as:

http://localhost:5173/node_modules/.vite/deps/@fortawesome_free-solid-svg-icons.js?v=de8afee4

but this fails and creates a 504 Gateway Timeout

When I check in my node_modules folder I can see the @fortawesome folder it is there as expected.

I suspect it may be something to do with how .Vite is constructing the build that is wrong.

My package.json file looks like this:

{
  "name": "litreach",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.2.0",
    "@fortawesome/free-brands-svg-icons": "^6.2.0",
    "@fortawesome/free-regular-svg-icons": "^6.2.0",
    "@fortawesome/free-solid-svg-icons": "^6.2.0",
    "@fortawesome/vue-fontawesome": "^3.0.2",
    "@popperjs/core": "^2.11.6",
    "bootstrap": "^5.2.2",
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.2",
    "sass": "^1.56.1",
    "sass-loader": "^13.2.0",
    "vite": "^3.1.8"
  }
}

I deleted my node_modules folder and reinstalled and rebuilt again, but the same problem persists.

kissu
  • 40,416
  • 14
  • 65
  • 133
Linda Keating
  • 2,215
  • 7
  • 31
  • 63
  • I recommend that instead: https://stackoverflow.com/a/72055404/8816585 That way, you will not be needing to remember their API changes + configure more libararies on that of that one. – kissu Nov 15 '22 at 15:55
  • Thanks for the response & link. I checked it out but it looks to me like unplugicons that are depending on https://iconify.design/ which don't seem to have any fontawesome icons - which is the set I need. – Linda Keating Nov 15 '22 at 21:53
  • 1
    There are 7 of them available, you can check them here: https://icones.js.org/ by using the search bar. – kissu Nov 15 '22 at 23:26
  • Thank you. I don't know how I missed that link in the docs. As an update. I `rm -rf node_modules`, restarted server, reinstalled all the node modules and everything worked. Not sure why it didn't work first time I did that, but I got there in the end. – Linda Keating Nov 17 '22 at 19:19

0 Answers0