Scrollbar is not working in Next.js

[anupmishra203]

In the Next.js, I am getting below warning.

Warning: Prop style did not match. Server: "position:absolute;top:0;left:0;right:0;bottom:0;overflow:scroll;-webkit-overflow-scrolling:touch;margin-right:0;margin-bottom:0" Client: "position:absolute;top:0;left:0;right:0;bottom:0;overflow:scroll;-webkit-overflow-scrolling:touch;margin-right:-17px;margin-bottom:-17px"`

[EliteMasterEric]

If your app runs on both client and server, activate the universal mode. This will ensure that the initial markup on client and server are the same.

Add the universal={true} parameter to your <Scrollbars> element.

See here for more info.

[bryandandan]

It worked thank you!

[kolnogorov]

For me it doesn't work even with universal={true}, still get the same error.

[wrgoto]

Same issue is happening for me even with universal={true}.

TypeError: document.createElement is not a function
    at getScrollbarWidth (/Users/wgoto/Projects/sol/web/node_modules/react-custom-scrollbars/lib/utils/getScrollbarWidth.js:20:28)
    at Scrollbars.render (/Users/wgoto/Projects/sol/web/node_modules/react-custom-scrollbars/lib/Scrollbars/index.js:665:69)
    at processChild (/Users/wgoto/Projects/sol/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3134:18)
    at resolve (/Users/wgoto/Projects/sol/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:2960:5)
    at ReactDOMServerRenderer.render (/Users/wgoto/Projects/sol/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3435:22)
    at ReactDOMServerRenderer.read (/Users/wgoto/Projects/sol/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3373:29)
    at renderToString (/Users/wgoto/Projects/sol/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:3988:27)
    at renderPage (/Users/wgoto/Projects/sol/web/node_modules/next/dist/next-server/server/render.js:50:851)
    at Object.context.renderPage (webpack-internal:///./pages/_document.js:29:34)
    at Function.getInitialProps (webpack-internal:///../node_modules/next/dist/pages/_document.js:143:19)

[srisakkarin]

If your app runs on both client and server, activate the universal mode. This will ensure that the initial markup on client and server are the same.

Add the universal={true} parameter to your <Scrollbars> element.

See here for more info.

ok it works thanks