[SOLVED] Fontawesome 6 throwing errors in Vue 3

Fontawesome 6 throwing errors in Vue 3

I'm trying to upgrade from fontawesome 5 to 6 in my vue 3 project but when I try to load an icon, it throws these errors:

Vue warn]: Unhandled error during execution of render function 
  at <FontAwesomeIcon class="icon" icon= Array(2) > 
  at <Benefits> 
  at <App>
warn @ app.js:29973
app.js:30153 Uncaught TypeError: Cannot read properties of undefined (reading 'icon')
    at Proxy.render (app.js:12923:26)
    at renderComponentRoot (app.js:23853:44)
    at ReactiveEffect.componentUpdateFn [as fn] (app.js:27701:57)
    at ReactiveEffect.run (app.js:22221:29)
    at setupRenderEffect (app.js:27827:9)
    at mountComponent (app.js:27610:9)
    at processComponent (app.js:27568:17)
    at patch (app.js:27169:21)
    at mountChildren (app.js:27356:13)
    at mountElement (app.js:27265:17)
app.js:29973 [Vue warn]: Unhandled error during execution of mounted hook 
  at <SvgProgressLine> 
  at <App>
warn @ app.js:29973
2app.js:35773 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'getTotalLength')
    at app.js:35773:29
    at callWithErrorHandling (app.js:30090:22)
    at callWithAsyncErrorHandling (app.js:30099:21)
    at Array.hook.__weh.hook.__weh (app.js:25359:29)
    at flushPostFlushCbs (app.js:30288:47)
    at flushJobs (app.js:30333:9)

I have followed the docs and installed these versions in packages.json:

"@fortawesome/fontawesome-svg-core": "^1.3.0-beta3",
"@fortawesome/free-brands-svg-icons": "^6.0.0-beta3",
"@fortawesome/free-regular-svg-icons": "^6.0.0-beta3",
"@fortawesome/free-solid-svg-icons": "^6.0.0-beta3",
"@fortawesome/vue-fontawesome": "^2.0.6",

They are imported in app.js like so:

import {library} from '@fortawesome/fontawesome-svg-core'
import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
import {faEnvelope, faCog, faGlobe, faServer, faKey, faSearch, faWrench, faCommentDollar, faHandsHelping, faChartBar, faExclamationTriangle, faLandmark, faUserCheck} from '@fortawesome/free-solid-svg-icons'

library.add(faEnvelope, faCog, faGlobe, faServer, faKey, faSearch, faWrench, faCommentDollar, faHandsHelping, faChartBar, faExclamationTriangle, faLandmark, faUserCheck);

createApp(app)
    .component('fa', FontAwesomeIcon)
    .use(VueSmoothScroll)
    .use(i18n)
    .mount("#app");

And displayed in the vue file like so:

<fa class="icon" :icon="[ 'fa', 'landmark' ]"></fa>

What am I doing wrong?

Solution