Nuxt3 + vue fontawesome で Hydration node mismatch warnがでた

ので、調べた。

概要

Nuxt3 に Fontawesome を利用したいので、
https://fontawesome.com/v6/docs/web/use-with/vue/use-with#nuxt
を参考に設定してみた。

・・・が、開発サーバー（localhost）起動時、ブラウザで以下のエラーがでた。

[Vue warn]: Hydration node mismatch

ターミナル側は、こんなメッセージが表示されていた。

✔ Nitro built in 2295 ms                                                               nitro 11:56:33
Could not find one or more icon(s) { prefix: 'fab', iconName: 'instagram' } {}

環境

• nuxt: v3.7.0
• @fortawesome/fontawesome-svg-core: v6.4.2
• @fortawesome/free-brands-svg-icons: v6.4.2
• @fortawesome/vue-fontawesome: v3.0.3

ソースコード

plugins/vue-fontawesome/vue-fontawesome.ts

import { library, config } from '@fortawesome/fontawesome-svg-core';
import {
  faInstagram as fabInstagram,
} from '@fortawesome/free-brands-svg-icons';

config.autoAddCss = false;

library.add(fabInstagram);

export default defineNuxtPlugin(() => {});

nuxt.config.ts

export default defineNuxtConfig({
  // 指定しなくてもよいらしいが、auto-importが好きでないのでimport元を指定してる
  plugins: [
    {
      src: '@/plugins/vue-fontawesome/vue-fontawesome.ts',
    },
  ],
});

どうやって修正した？

build.transpile に fortawesome関連を追加した。

export default defineNuxtConfig({
+  build: {
+    transpile: [
+      '@fortawesome/vue-fontawesome',
+      '@fortawesome/fontawesome-svg-core',
+      '@fortawesome/free-brands-svg-icons',
+    ],
+  },

  plugins: [
    {
      src: '@/plugins/vue-fontawesome/vue-fontawesome.ts',
    },
  ],
});

参考URL

• https://github.com/FortAwesome/vue-fontawesome/issues/394
• https://github.com/nuxt/nuxt/discussions/16014#discussioncomment-2477885

参考URLの内容をまとめただけの記事ですみません。
誰かの役に立つよいなと思いつつ。