Warning: Prop `style` did not match. Server: " .... " Client: " ... "

[yelnyafacee]

What is the current behavior?

next-dev.js?3515:25 Warning: Prop `style` did not match. Server: "box-sizing:border-box;direction:ltr;height:auto;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:hidden;overflow-y:auto;contain:layout" Client: "box-sizing:border-box;direction:ltr;height:auto;position:relative;width:0;-webkit-overflow-scrolling:touch;will-change:transform;overflow-x:auto;overflow-y:auto;contain:layout"
    at div
    at Grid (webpack-internal:///./node_modules/react-virtualized/dist/es/Grid/Grid.js:87:86)
    at List (webpack-internal:///./node_modules/react-virtualized/dist/es/List/List.js:53:86)
    at div
    at div
    at AutoSizer (webpack-internal:///./node_modules/react-virtualized/dist/es/AutoSizer/AutoSizer.js:43:86)
    at Result
    at div
    at div
    at div
    at Album (webpack-internal:///./pages/albums/[album].js:40:28)
    at main
    at div
    at PortalProvider (webpack-internal:///./node_modules/react-autotip/lib/Provider/index.js:36:5)
    at SessionProvider (webpack-internal:///./node_modules/next-auth/react/index.js:417:24)
    at MyApp (webpack-internal:///./pages/_app.js:159:28)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20638)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23179)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:323:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:822:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:946:27) 

See more info here: https://nextjs.org/docs/messages/react-hydration-error

ERROR COMING FROM: node_modules\react-virtualized\dist\es\Grid\Grid.js

CODE IN FILE CAUSING ERROR: _classCallCheck(this, Grid);

CSS DIFF BETWEEN SERVER & CLIENT:

SERVER:
box-sizing:border-box;
direction:ltr;
height:auto;
position:relative;
width:0;
-webkit-overflow-scrolling:touch;
will-change:transform;
overflow-x:hidden;
overflow-y:auto;
contain:layout

CLIENT:
box-sizing:border-box;
direction:ltr;
height:auto;
position:relative;
width:0;
-webkit-overflow-scrolling:touch;
will-change:transform;
overflow-x:auto;
overflow-y:auto;
contain:layout

HOW TO FIX BUG IN YOUR NODE_MODULES \react-virtualized FILE?

What is the expected behavior?

NO ERROR

Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?

Browser	Google Chrome Version 99.0.4844.84 (Official Build) (64-bit)
OS	Windows
React	"react": "^18.0.0",
React DOM	"react-dom": "^18.0.0"
react-virtualized	"react-virtualized": "^9.22.3"

[chin2km]

@bvaughn any recommendation how to fix this? with React 17 it was hydration warning, but React 18 its really breaking hydration.

[yelnyafacee]

its been 2x month+ and no one, not even the author of library cares to clarify why this is happening, it is pointless, this library is most likely abandoned

[yelnyafacee]

@chin2km hi, did u managed to find a solution for this?

[carmon]

If you had take 2x month+ to read the code instead of pursuing the repository maintainer, you would found a solution:

<List /* other props */ style={{ overflowX: 'auto' }} />

This is not a corporation maintained API, be respectful with people that shares their work with the world.

[yelnyafacee]

Why do I even need to specifically define {{ overflowX: 'auto' }} to <List /> to "fix" both server and client side the same? looks more like a hack than an actual solution

why would the render of server and client even be different in the first place?

[carmon]

Of course it's a hack, I was having the same problem and this fixed it.

why would the render of server and client even be different in the first place?

Autosizer needs to be rendered to make the actual calculation, because it needs to access browser global variables. This calculations are returning wrong values due the lack of browser API.

You can try to fork the repo make a polyfill for that or put that prop (which overrides the calculated style attribute here),