search

malte-wessel / react-custom-scrollbars

React scrollbars component
http://malte-wessel.github.io/react-custom-scrollbars/
MIT License
3.2k stars 577 forks source link

Scrollbar is not working in Next.js #344

Open anupmishra203 opened 4 years ago

anupmishra203 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

It worked thank you!

kolnogorov commented 4 years ago

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

wrgoto commented 3 years ago

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 commented 2 years ago

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