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.

flex gap feature detection causes style prop mismatch warning with server-side rendering

See original GitHub issue

I have searched the issues of this repository and believe that this is not a duplicate.

Steps to reproduce

enable gutters > 0
use a framework with server-side rendering like Next.js
create a Row or Col component

What is expected?

no warnings in console

What is actually happening?

Warning: Prop `style` did not match. Server: "null" Client: "--column-gap:0px;--row-gap:0px"
    at div
    at Row

Environment	Info
antd	4.12.3
React	16.13.1
System	n/a
Browser	any with flex-gap support

This appears to be caused by the feature detection function detectFlexGapSupported in _util/styleChecker. It returns false when running during server-side rendering, but returns true in modern browsers on the client side.

Issue Analytics

State:
Created 3 years ago
Reactions:23
Comments:6

Top GitHub Comments

5reactions

theahmadzaicommented, Feb 26, 2021

Have the same issue using antd with next.js

4reactions

nadam131commented, Mar 4, 2021

I guess it’s should to be reopen.

"antd": "^4.13.0", "next": "^10.0.7",

Vertical gutter works fine in dev now, but not in production. I have static prerender pages (getStaticPaths + getStaticProps) in Next.js and after build there is no vertical space.

Also error Warning: Prop style did not match. Server: "null" Client: "row-gap:0" at div still in development mode

Top Results From Across the Web

flex gap feature detection causes style prop mismatch warning with ...

This appears to be caused by the feature detection function detectFlexGapSupported in _util/styleChecker. It returns false when running during server-side ...

How to detect browser support for Flexbox Gap

The gap property is an attempt to have the same property for CSS grid and flexbox. It will be responsible for the spacing...

React + Material-UI - Warning: Prop className did not match

I'm having difficulty with differences between client-side and server-side rendering of styles in Material-UI ...

Safari Technology Preview Release Notes - Apple Developer

Added emulation toggles for prefers-reduced-motion and prefers-contrast CSS media features (257197@main); Fixed corrupted styles when adding a new property ...

Releases - Pandoc

Org template: add abstract from metadata as block of type “abstract” (#8204). HTML writer: use flex property for column widths (Albert Krewinkel, #8232)....