Menu
I came across a weird bug in nextjs, when I am adding
<Head>
<link rel="canonical" href="url"></link>
</Head>
inside my index.tsx, one element inside that page does not render properly. I do use
<FontAwesomeIcon icon={song.voted === true ? faHeart : fasHeart} className={`text-2xl color-text-red`} />
which has those standard classes added to it svg-inline--fa fa-youtube fa-w-18 text-2xl color-text-red.
The weird thing is that when the canonical tag is not added those classes do work correctly
After adding the tag, the width and svg-inline--fa does not get rendered (tried to refresh, restart server, prod en dev environment)
these are my dependency's
"@fortawesome/fontawesome-svg-core": "^1.2.34",
"@fortawesome/free-brands-svg-icons": "^5.15.2",
"@fortawesome/free-regular-svg-icons": "^5.15.2",
"@fortawesome/free-solid-svg-icons": "^5.15.2",
"@fortawesome/react-fontawesome": "^0.1.14",
"@zeit/next-css": "^1.0.1",
"@zeit/next-sass": "^1.0.1",
"autoprefixer": "^10.2.3",
"file-loader": "^6.2.0",
"mysql": "^2.18.1",
"next": "latest",
"next-fonts": "^1.5.1",
"next-images": "^1.7.0",
"next-svgr": "0.0.2",
"next-transpile-modules": "^6.0.0",
"node-sass": "^5.0.0",
"postcss": "^8.2.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-rainbow-components": "^1.24.1",
"react-redux": "^7.2.2",
"redux": "^4.0.5",
"tailwindcss": "^2.0.2"
has anyone ever seen this problem or has any ideas on how to fix it ?
thx in advance
414
probably too late for OP, but for future people it looks like this should answer the question.
add to _app.js
import "@fortawesome/fontawesome-svg-core/styles.css";
config.autoAddCss = false;
source: https://github.com/FortAwesome/react-fontawesome/issues/410#issuecomment-787468285
138
answered Oct 22 '25 14:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With