Open christophheich opened 2 years ago
same here nuxt@3.0.0-rc.9 @fortawesome/vue-fontawesome@3.0.1
Also getting this issue!
We'll take a look when we get a chance.
As a workaround, you can force a icons to render client side only by wrapping it in another component. When this issue is fixed, you can just remove the <ClientOnly>
wrapper:
<ClientOnly>
<FaIcon v-bind="$attrs" />
</ClientOnly>
I second this: issue persists on the following package configuration:
nuxt@3.0.0-rc.9
@fortawesome/vue-fontawesome@3.0.1
I found this comment: https://github.com/nuxt/nuxt/discussions/16014#discussioncomment-2477885 Fixed the issue for me 👍
For me the hydration warnings was solved by an fix for an other problem i had: https://github.com/FortAwesome/vue-fontawesome/issues/447#issuecomment-1476257130
I can confirm this is still an issue with the latest version of nuxt and fontawesome pro
The links above should fix the issue so let's have it clear here (instead of visiting another link):
// nuxt.config.ts
build: {
transpile: [
'@fortawesome/fontawesome-svg-core',
'@fortawesome/pro-solid-svg-
'@fortawesome/pro-regular-svg-icons',
'@fortawesome/pro-light-svg-icons',
'@fortawesome/free-brands-svg-icons'
]
}
However, I believe this is something doable with nuxt hooks in a nuxt-plugin. I started working on a nuxt module for vue-fontawesome
and hoped to do something slightly better but the current plugin is actually good enough and mine didn't bring a lot more features / easiness so I dropped it.
This should just be documented on the installation with Nuxt section of FontAwesome.
build: { transpile: [ '@fortawesome/fontawesome-svg-core', '@fortawesome/pro-solid-svg- '@fortawesome/pro-regular-svg-icons', '@fortawesome/pro-light-svg-icons', '@fortawesome/free-brands-svg-icons' ] }
The transpile should include "@fortawesome/vue-fontawesome" too. At least on my side
This is my nuxt.config.ts:
build: { transpile: [ "@fortawesome/fontawesome-svg-core", "@fortawesome/pro-solid-svg-icons", "@fortawesome/pro-regular-svg-icons", "@fortawesome/pro-light-svg-icons", "@fortawesome/vue-fontawesome", ], }, css: [ "~/assets/styles/main.scss", "@fortawesome/fontawesome-svg-core/styles.css", ],
and the error is still there:
[Vue warn]: Hydration node mismatch:
build: { transpile: [ '@fortawesome/fontawesome-svg-core', '@fortawesome/pro-solid-svg- '@fortawesome/pro-regular-svg-icons', '@fortawesome/pro-light-svg-icons', '@fortawesome/free-brands-svg-icons' ] }
The transpile should include "@fortawesome/vue-fontawesome" too. At least on my side
this fix my issue
nuxt: 3.8.1
I found this comment: nuxt/nuxt#16014 (comment) Fixed the issue for me 👍
thanks alot
still issue for laravel 10 with vite (inertiajs - vue3 - ssr)
If you're curious, like I was, about why we need to transpile @fortawesome/vue-fontawesome in order to avoid this SSR hydration mismatch, it's because the module field in the package.json file from @fortawesome/vue-fontawesome specifies index.es.js as the entry point (link) but package.json doesn't specify "type": "module"
so Node treats this file as a CommonJS module. But index.es.js actually uses ESM syntax, so Node fails to load it and thus the <FontAwesomeIcon>
component fails to render on the server since it's not defined.
The Nuxt documentation does an excellent job documenting this problem:
https://nuxt.com/docs/guide/concepts/esm#what-kinds-of-problems-can-there-be
So until @fortawesome/vue-fontawesome is updated to correct this issue, simply configure Nuxt to transpile @fortawesome/vue-fontawesome:
build: {
transpile: [
'@fortawesome/vue-fontawesome',
],
},
Describe the bug When using Nuxt 3 with the
<font-awesome-icon>
component while using SSR it causes a hydration node mismatch.Error:
Expected behavior Using the component should not cause a node mismatch.
Desktop (please complete the following information):
Additional context Wrapping the
<font-awesome-icon>
component with<client-only>
temporary fixes this issue.Package.json