Importing Fontawesome to VueJS - vue.js

Question

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.