Could not find one or more icon(s), except the icons show up correctly on the page.

[Morpheu5]

Describe the bug
I'm using Nuxt 3 and vue-fontawesome 3.0.1. Occasionally, an error crops up in my logs saying an icon can't be found, except when I look at the rendered page, the icon is there. Sometimes the error doesn't show up. After a bit, the error may stop showing up, but it may come back later, and I can't figure out any way to reliably reproduce this.

Reproducible test case
I can't reliably reproduce the issue, but I followed the Nuxt 3 instructions from the docs quite faithfully.

Expected behavior
No error in the console.

Desktop (please complete the following information):

• Chrome, Firefox, Safari… doesn't seem browser-related.

[Matthewenderle]

+1 for me.
I temporarilly patched it by commenting out line 559 in node_modules\@fortawesome\vue-fontawesome\index.js and replaced it with return false;

[Matthewenderle]

I think I came across something. If you're using SSR it has issues with it. Here's what I did. I'd submit a pull-request, but I'm not exactly sure how to write a test for this.

vue.watch(renderedIcon, function (value) {
  if (!value) {
    return log('Could not find one or more icon(s)', icon.value, mask.value);
  }
}, {
  immediate: true
});

I wrapped that code in a client if statement.

if (process.client) {
  vue.watch(renderedIcon, function (value) {
    if (!value) {
      return log('Could not find one or more icon(s)', icon.value, mask.value);
    }
  }, {
    immediate: true
  });
}  

Changing that makes it work without issues.

[robmadole]

@Matthewenderle are you using the library.add() feature to add icons?

[ricky11]

Following on from @Morpheu5 issue, i am having exactly the same problem.

The icons do work and display correctly in the browser, but with lots of warnings in both the dev terminal and the browser console. here is my This is my /plugins/fontawesome.js file (nuxt 3) with fa versions below:
"@fortawesome/fontawesome-svg-core": "^6.2.0",
"@fortawesome/free-solid-svg-icons": "^6.2.0",
"@fortawesome/vue-fontawesome": "^3.0.1",

import { library, config } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon as fa } from '@fortawesome/vue-fontawesome'
import { faChevronLeft,faFilePen } from '@fortawesome/free-solid-svg-icons'

config.autoAddCss = false

library.add(faChevronLeft,faFilePen)

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('fa', fa, {})
})

fas is the default so i should not have to add the whole package in.

and in nuxt.config.ts

css : [
'@fortawesome/fontawesome-svg-core/styles.css',
],

When running npm run serve which is vues dev mode, this is what the terminal shows me :

[Vue warn]: A plugin must either be a function or an object with an "install" function.
Could not find one or more icon(s) { prefix: 'fas', iconName: 'chevron-left' } {}

In the browser, the icon is displayed OK. but console warnings :

Vue warn: Hydration node mismatch:
- Client vnode: svg 
- Server rendered DOM: <!---->  
  at <FontAwesomeIcon size="xs" class="chevron" icon="chevron-left" > 
  at <Faqs> 

[Matthewenderle]

@Matthewenderle are you using the library.add() feature to add icons?

Yes, I am.

import { library, config } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { fas } from '@fortawesome/pro-solid-svg-icons';

// This is important, we are going to let Nuxt worry about the CSS
config.autoAddCss = false;

// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
library.add(fas);

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon, {});
});

[noook]

I am having the same issue with the exact same config

[Matthewenderle]

I am having the same issue with the exact same config

Did you try my solution? I just had to reapply it as my package updated. The line number isn't the same anymore, just need to run a search for the first line to replace.

[noook]

Someone mentioned on a discussion that it is actually required to transpile in the vite config, it fixed the error:

https://github.com/nuxt/framework/discussions/3823#discussioncomment-2477885

[cainenielsen]

Could not find one or more icon(s) { prefix: 'fas', iconName: 'user' } {}

I am experiencing the same thing here with the below dependencies after following the steps outlined on frontawesome.com.

"nuxt": "3.0.0"
"@fortawesome/fontawesome-svg-core": "^6.2.1",
"@fortawesome/free-brands-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/vue-fontawesome": "^3.0.2"

I have attempted multiple sets of steps to resolve the issue, including adding the resources to the nuxt.config.js transpile builds as shown in this thread, changing how I import the icons, eg. as a whole pack or individually, and changing how I reference the icons in components.

Nothing seems to work for me.

[ricky11]

I was able to solve this in nuxt.config.js, but transpile one dependencies:
build: {
transpile: [
'@fortawesome/vue-fontawesome'
]
},

it seems vue-fontawesome needs to update their package to use es6 syntax perhaps.

[oberocks]

Ok so in the use case of vite managing the build process and this pesky vue-fontawesome console warning Could not find one or more icon(s) { prefix: '...', iconName: '...' } {} showing up, there's a quick solve that cleans up the issue for me both locally and in automation logs.

So for me, the solution was to force the production environment in the build script command (npm scripts).

In my case I'm using vite-ssg for a bunch of projects, the fix is to open up the package.json file and go to the build script:

"scripts": {
    "build": "vite-ssg build",
}

And then update it to this:

"scripts": {
    "build": "NODE_ENV=production vite-ssg build",
}

Leaving this comment because I literally just now spent a couple hours trying to figure out what the heck I did in some of my projects that are fixed now, versus all the projects I still have showing the warning for missing icons that aren't really missing. Maybe this helps someone else to not have to spend that time.