Components/Input

[Carlos6a]

trafficstars

when you find a compilation error, it bugs, you have to delete it and use it again to remove it. gives the following message in console:

Warning: Prop id did not match. Server: "nextui-input-egfefba1" Client: "nextui-input-d063o0if" input Styled.input label Styled.div div Styled.div div Styled.div Input<@webpack-internal:///./node_modules/@nextui-org/react/esm/input/input.js:41:54 main div Home@webpack-internal:///./pages/index.js:24:72 MyApp@webpack-internal:///./pages/_app.js:38:21 ErrorBoundary@webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20584 ReactDevOverlay@webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23123 Container@webpack-internal:///./node_modules/next/dist/client/index.js:359:24 AppContainer@webpack-internal:///./node_modules/next/dist/client/index.js:793:20 Root@webpack-internal:///./node_modules/next/dist/client/index.js:915:21

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

[jrgarciadev]

Hey @Carlos6a have you implemented the CssBaseline.flush()? https://nextui.org/docs/guide/nextui-plus-nextjs

[jesusalber1]

Hi, I run into the same issue in my project. It also appears when I run the nextjs example, see below:

react-dom.development.js?61bb:67 Warning: Prop `id` did not match. Server: "nextui-input-label-ak3qvtbo" Client: "nextui-input-label-1m9noum5"
    at label
    at Styled.label
    at div
    at Styled.div
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/input/input.js:42:7)
    at div
    at Styled.div
    at Container (webpack-internal:///./node_modules/@nextui-org/react/esm/container/container.js:33:3)
    at div
    at Home
    at ThemeProvider (webpack-internal:///./node_modules/@nextui-org/react/esm/theme/theme-provider.js:35:10)
    at MyApp (webpack-internal:///./pages/_app.js:22:24)
    at ErrorBoundary (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47)
    at ReactDevOverlay (webpack-internal:///./node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:23)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:160:5)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:648:24)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:784:25)

[jrgarciadev]

Hey @jesusalber1 we are working on that 🙌🏻

[jrgarciadev]

Hey @jesusalber1 @Carlos6a a workaround for solving this until we release the new version is by setting your own id to the Input component, something like this

<Input id="email" placeholder="Enter your email" />

Hope it helps 🙌🏻

[jrgarciadev]

Hey @jesusalber1 @Carlos6a 🙌🏼 ,The new version was released, please try this in case it has not been resolved we reopen the issue, thank you very much! https://github.com/nextui-org/nextui/releases/tag/v1.0.2-beta.4

[Gomah]

Hey there 👋🏻 ,

Thanks @jrgarciadev for this amazing UI lib! We ran into this issue today and it's still showing an error stating the Prop id isn't matching:

Warning: Prop `id` did not match. Server: "react-aria6856402524-19" Client: "react-aria4308185822-2"

Adding the id prop didn't help, it seems to be conflicting with the label prop for some reason?

This works:

<Input
  id="hey"
  type="email"
/>

This doesn't:

<Input
  id="hey"
  type="email"
  label="Email"
/>

[jrgarciadev]

Hey @Gomah thank you for using it 🙌🏻

Did you include the NextUIProvider in your main file? https://nextui.org/docs/guide/getting-started#next.js

[Gomah]

Hey @Gomah thank you for using it 🙌🏻

Did you include the NextUIProvider in your main file? https://nextui.org/docs/guide/getting-started#next.js

Yes, we followed the installation guide carefully, actually if you run the example from the nextui repo: https://github.com/nextui-org/nextui/tree/main/examples/create-next-app

Both label & labelPlaceholder props are prompting errors on the mismatch node: https://github.com/nextui-org/nextui/blob/main/examples/create-next-app/pages/index.js#L57

[tianenpang]

Hi, @Gomah I got the same issue as you.

I think the problem is with the id of the label, we can pass the input id through the prop, but when using the label, the id is automatically generated by useLabel.

With some research, I found out that SSRProvider may not support the react strict mode yet, I just disabled the strict mode for now.

Possibly it can be refactored by using new feat of React 18, such as React.useId (linked below).

• https://github.com/adobe/react-spectrum/issues/2231#issuecomment-905824601
• https://github.com/reactwg/react-18/discussions/111

[b-bot]

Why is this closed? Still experiencing this in the latest version.

[zer0npc]

Same issue in Dropdown.Trigger and Dropdown.Button, a workaround is setting an id to the Button or Trigger's child.

[cowoder]

Running into this issue with the Table component as well.

[smartercow]

I'm having issue with Input.Password

Warning: Prop id did not match. Server: "react-aria-1" Client: "react-aria-2" at label at Styled.label at div at Styled.div

[dmythro]

Having same issue as well, with Navbar's links:

Warning: Prop `id` did not match. Server: "react-aria-1" Client: "react-aria-2"
li
Styled.li
NextUI.NavbarItem
NextUI.NavbarLink
LinkComponent
ul
Styled.ul
NextUI.NavbarContent
NavLocaleLinks
div
Styled.div
nav
Styled.nav
NextUI.Navbar

And if second link is active:

Warning: Prop `className` did not match. Server: "nextui-c-dIWzTP nextui-c-PJLV nextui-c-dIWzTP-iXPvBl-color-text nextui-c-dIWzTP-isWIbj-animated-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-dIWzTP-icTVmtU-css nextui-link nextui-navbar-link" Client: "nextui-c-dIWzTP nextui-c-PJLV nextui-c-dIWzTP-iXPvBl-color-text nextui-c-dIWzTP-isWIbj-animated-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-dIWzTP-ihuGhNP-css nextui-link nextui-navbar-link"
a
Styled.a
NextUI.Link
li
Styled.li
NextUI.NavbarItem
NextUI.NavbarLink
LinkComponent
ul
Styled.ul
NextUI.NavbarContent

I tried putting manual id props on everything but didn't help. On latest module versions possible.

[peteole]

I can confirm the issue with the navbar

[pradhanDebkanta]

Having same issue as well, with Navbar's links:

Warning: Prop `id` did not match. Server: "react-aria-1" Client: "react-aria-2"
li
Styled.li
NextUI.NavbarItem
NextUI.NavbarLink
LinkComponent
ul
Styled.ul
NextUI.NavbarContent
NavLocaleLinks
div
Styled.div
nav
Styled.nav
NextUI.Navbar

And if second link is active:

Warning: Prop `className` did not match. Server: "nextui-c-dIWzTP nextui-c-PJLV nextui-c-dIWzTP-iXPvBl-color-text nextui-c-dIWzTP-isWIbj-animated-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-dIWzTP-icTVmtU-css nextui-link nextui-navbar-link" Client: "nextui-c-dIWzTP nextui-c-PJLV nextui-c-dIWzTP-iXPvBl-color-text nextui-c-dIWzTP-isWIbj-animated-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-dIWzTP-ihuGhNP-css nextui-link nextui-navbar-link"
a
Styled.a
NextUI.Link
li
Styled.li
NextUI.NavbarItem
NextUI.NavbarLink
LinkComponent
ul
Styled.ul
NextUI.NavbarContent

I tried putting manual id props on everything but didn't help. On latest module versions possible.

I am facing same issue with the Navbar's link. But after dynamic export the Component with ssr: false this error is gone. I export my component like this. export default dynamic(()=>Promise.resolve(ComponentName), {ssr: false})

[nomadme]

Same issue as well...

Warning: Prop `id` did not match. Server: "react-aria-1" Client: "react-aria-2"
    at p
    at li
    at Styled.li
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/navbar/navbar-item.js:16:91)
    at Styled.NextUI.NavbarItem
    at ul
    at Styled.ul
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/navbar/navbar-content.js:14:91)
    at div
    at Styled.div
    at nav
    at Styled.nav
    at eval (webpack-internal:///./node_modules/@nextui-org/react/esm/navbar/navbar.js:15:91)
    at MainNavbar
    at div
    at $f57aed4a881a3485$var$OverlayContainerDOM (webpack-internal:///./node_modules/@react-aria/overlays/dist/module.js:745:55)
    at $f57aed4a881a3485$export$178405afcd8c5eb (webpack-internal:///./node_modules/@react-aria/overlays/dist/module.js:709:21)
    at $f57aed4a881a3485$export$bf688221f59024e5
    at $704cf1d3b684cc5c$export$9f8ac96af4b1b2ae (webpack-internal:///./node_modules/@react-aria/ssr/dist/module.js:23:64)
    at __webpack_exports__.default.disableBaseline (webpack-internal:///./node_modules/@nextui-org/react/esm/theme/theme-provider.js:15:138)
    at MyApp (webpack-internal:///./pages/_app.tsx:42:27)
    at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:20742)
    at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:8:23635)
    at Container (webpack-internal:///./node_modules/next/dist/client/index.js:70:9)
    at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:216:26)
    at Root (webpack-internal:///./node_modules/next/dist/client/index.js:407:27) 

[madmandd]

Having same issue as well, with Navbar's links:

Warning: Prop `id` did not match. Server: "react-aria-1" Client: "react-aria-2"
li
Styled.li
NextUI.NavbarItem
NextUI.NavbarLink
LinkComponent
ul
Styled.ul
NextUI.NavbarContent
NavLocaleLinks
div
Styled.div
nav
Styled.nav
NextUI.Navbar

And if second link is active:

Warning: Prop `className` did not match. Server: "nextui-c-dIWzTP nextui-c-PJLV nextui-c-dIWzTP-iXPvBl-color-text nextui-c-dIWzTP-isWIbj-animated-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-dIWzTP-icTVmtU-css nextui-link nextui-navbar-link" Client: "nextui-c-dIWzTP nextui-c-PJLV nextui-c-dIWzTP-iXPvBl-color-text nextui-c-dIWzTP-isWIbj-animated-true nextui-c-PJLV-gulvcB-isFocusVisible-false nextui-c-dIWzTP-ihuGhNP-css nextui-link nextui-navbar-link"
a
Styled.a
NextUI.Link
li
Styled.li
NextUI.NavbarItem
NextUI.NavbarLink
LinkComponent
ul
Styled.ul
NextUI.NavbarContent

I tried putting manual id props on everything but didn't help. On latest module versions possible.

I am facing same issue with the Navbar's link. But after dynamic export the Component with ssr: false this error is gone. I export my component like this. export default dynamic(()=>Promise.resolve(ComponentName), {ssr: false})

Navbar exported successfully. WORK. THANK YOU

[Ninjaneer87]

Warning: Prop "aria-labelledby" did not match. Server: "react-aria-:R2r9cq:-bitcoin-market_cap_rank" Client: "react-aria-:Rbd5j9:-bitcoin-market_cap_rank"

This still happens in Table related components