[BUG] - Input problems

[andresflorez16]

Describe the bug

I tried to use the Input with id, type attributes, but I got the same error

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Import Input
2. Add Attributs to my Input
3. Console Error

Expected behavior

As I user, I expect no got Console Error

Screenshots or Videos

Operating System Version

• OS: [Windows]

Browser

Chrome

[danielsimao]

@andresflorez16, did you setup correctly the library? You need to wrapper your app around NextUIProvider as it is explained in the Getting Started.

This erros occurs because the library react-aria generates unique ids and needs a their specific provider wrapper around the app, so they can generate the same id both on the server side and the client side.

[andresflorez16]

Hi, thanks for your prompt response, I use the provider:

[danielsimao]

Could you please create a codesandbox?

[andresflorez16]

This is the repository, https://github.com/andresflorez16/ladrillos-mocoa.git

[danielsimao]

I don't see anything abnormal in your repo that would cause the warning. I might have to look up into the input's label.

[andresflorez16]

Everything it's fine, idk what it could be

[danielsimao]

Can this be closed then?

[andresflorez16]

Ok close it, but the bug is still there, so I'll keep an eye on it

[tpruisimao]

Sorry, I misundertood. I thought you said the warning was gone.

[andresflorez16]

Oh no, sorry, the warning is still there, I mean, idk what it's, my code it's fine... 😅

[Tossko]

I have the same error as @andresflorez16, i have the provider configured according to the official documentation.

[danielsimao]

I just found why: React Spectrum Issue.

NextUI is still running on react version 16.8.0. To fix this issue on the lib side we would need to:

• Update React version to >=18.0.0
• Update @react-aria version that includes support for React version >= 18.0.0

For the time being, if you want to ignore the issue you will have to run your app without Strict Mode. Here is how:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
};

module.exports = nextConfig;

link to docs

[andresflorez16]

`/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
};

module.exports = nextConfig;`

That's works for me, thanks.