nextui-org / nextui

🚀 Beautiful, fast and modern React UI library.
https://nextui.org
MIT License
21.8k stars 1.49k forks source link

[BUG] - Textarea difference when SSR #1564

Open CarlosVelilla opened 1 year ago

CarlosVelilla commented 1 year ago

NextUI Version

2.1.8

Describe the bug

Hi! I'm facing a bug with the Textarea component. When using it, even if I don't use it with any prop, I get this error on console: "Warning: Extra attributes from the server: style".

I've been debugging and it's related to the change of styling the Textarea gets once it's rendered. There's a "style" being applied even if no styling prop is passed. In my case, this default value added is "style="height: 76px !important;"". That differs from the server side version, and therefore the warning.

If I can help anyhow solving it please let me know, thank you for your work!

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Just printing a Textarea on screen, without props or with them.

Expected behavior

As a user I expect not facing a popping on the style. As a developer I expect not having a warning because of the difference between server and client rendered version.

Screenshots or Videos

Textarea bug

Error text copy-pasted: app-index.js:31 Warning: Extra attributes from the server: style at html at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:73:9) at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:81:11) at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9) at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11) at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11) at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9) at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:326:11) at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:147:11) at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9) at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11) at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:417:13) at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:123:11) at RSCComponent at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:139:11)

Operating System Version

Windows

Browser

Chrome

sohan01fw commented 2 months ago

@CarlosVelilla just avoid inline styling in server page it will get fixed