Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Server Side rendering problem with NextJS and mask prop

See original GitHub issue

When I add this line of code in my React component using NextJS v12.0.10

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faGithub } from '@fortawesome/free-brands-svg-icons'
import { faCircle } from '@fortawesome/free-solid-svg-icons'

<FontAwesomeIcon fixedWidth icon={faGithub} mask={faCircle} size="2x" transform="shrink-6" />

in Chrome console I get this warning:

Warning: Prop `id` did not match. Server: "clip-czH9E63zpnkZ" Client: "clip-p0bNRCYkXdjo"
    at clipPath
    at defs
    at svg
    at FontAwesomeIcon (webpack-internal:///./node_modules/@fortawesome/react-fontawesome/index.es.js:336:27)
    at a
    at div
    at Social
    at div
    at div
    at div
    at div
    at Layout (webpack-internal:///./components/Layout.jsx:20:26)
    at Home
    at MyApp (webpack-internal:///./pages/_app.js:38:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20584)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23125)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:359:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:793:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:915:27)

If I remove the mask prop I get no warnings. I know this is only a warning, but is there a way to avoid it?

Issue Analytics

State:
Created 2 years ago
Comments:9 (5 by maintainers)

Top GitHub Comments

1reaction

robmadolecommented, Jul 28, 2022

@pioz you can use anything you like. A GitHub repo, a downloadable .zip. It doesn’t have to be a codepen.

0reactions

piozcommented, Aug 4, 2022

Ok, I’ve re-updated fontawesome, and the react warning has gone. Sorry, last time I thought I was using the latest version, it wasn’t.

Top Results From Across the Web

Clean URL Masking with Server Side Rendering - YouTube

Next JS is a framework for rendering React JS on the server. In this video we look at adding clean URL making on...

Handling runtime errors when server side rendering with Next.js

Let's take a look of ways how can we avoid a webpage from crashing in production? 1. Error boundary. function Tile(props) { return ......

Next js app with SSR is not pre-rendering HTML, so web ...

js app that uses server side rendering. When running the application both locally and in production (on vercel edge), the initial page response ......

Warning: useLayoutEffect does nothing on the server ... - GitHub

I'm creating an application using React 16.8.6 + NextJS 9.0.2. It has a page that contains a Form that uses the component React...

Refreshing Server-Side Props - Next.js - Josh W Comeau

One of my favourite features about Next.js is that individual routes can opt-in to server-side rendering. While I tend to be a pretty...