[BUG] - React does not recognize the disableAnimation prop on a DOM element.

[uigywnkiub]

NextUI Version

2.4.2

Describe the bug

In browser console

Warning: React does not recognize the disableAnimation prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase disableanimation instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Bug reproduce of all your site pages.

Expected behavior

As a user, I expected disableanimation prop in lowercase (maybe), but I am seeing a warning error log in console browser that cannot recognize attribute.

Screenshots or Videos

Operating System Version

• OS: macOS

Browser

Chrome

[linear]

ENG-1013 [BUG] - React does not recognize the `disableAnimation` prop on a DOM element.

[wingkwong]

Bug reproduce of all your site pages.

Can you share which site pages you were visiting? I didn't see this error.

[uigywnkiub]

Bug reproduce of all your site pages.

Can you share which site pages you were visiting? I didn't see this error.

localhost

[wingkwong]

please provide a minimal reproducible example

[uigywnkiub]

please provide a minimal reproducible example

d.mov

[paperdiamond]

I also started experiencing this after updating to 2.4.2

[daveycodez]

This is happening on all Avatars on 2.4.2

[wingkwong]

@LeakedDave The fix will be available in the upcoming v2.4.3. Please use the canary version 0.0.0-canary-20240616172522 if necessary as a temp fix at the moment.

[uigywnkiub]

@LeakedDave please use the canary version 0.0.0-canary-20240616172522 as a temp fix at the moment.

When new version released?

[wingkwong]

@uigywnkiub Currently I don't have the exact date. We need to discuss internally first.

[iFurySt]

same question. looking forward to the new version being released. ❤️

[bug-breeder]

i have the same problem with 2.4.2, hope it will be fixed soon

[dumbrosio]

please use the canary version 0.0.0-canary-20240616172522 as a temp fix at the moment.

This does not work with individual adding components

[uigywnkiub]

please use the canary version 0.0.0-canary-20240616172522 as a temp fix at the moment.

This does not work with individual adding components

how to install this? and when comes the new release?

[dumbrosio]

please use the canary version 0.0.0-canary-20240616172522 as a temp fix at the moment.

This does not work with individual adding components

My bad, the issue was on User component, not Avatar.

"@nextui-org/user": "0.0.0-canary-20240616172522" works.

[manglx]

Hello guys, I was having this same error, but I changed the import from the specific component to the global components:

This produces the error for me:
import { User } from "@nextui-org/user";

So I changed the import and the error is gone, and still works fine :)
import { User } from "@nextui-org/react";

Hope this works for you in case you don't like seing errors like me lol. This is a temporary fix while we wait for the new version:)

[dumbrosio]

I was having this same error, but I changed the import from the specific component to the global components:

This produces the error for me: import { User } from "@nextui-org/user";

So I changed the import and the error is gone, and still works fine :) import { User } from "@nextui-org/react";

I actually think the type of import depends on the type of installation. If I understand what you are saying, I suggest you refresh your node_modules cache.

[manglx]

I was having this same error, but I changed the import from the specific component to the global components:
This produces the error for me: import { User } from "@nextui-org/user";
So I changed the import and the error is gone, and still works fine :) import { User } from "@nextui-org/react";

I actually think the type of import depends on the type of installation. If I understand what you are saying, I suggest you refresh your node_modules cache.

Ohh, yes it depends on the installation, I didn't try refreshing node_modules cache, I'll try that to see if that also works and return to write if so, thank you so much :)

Edit: I tried refreshing the cache and did not work :(, so I think this time I'll stick with my solution.

[wingkwong]

@King-Mufasa latest version is 2.4.6. please upgrade to include the fix

[uigywnkiub]

@King-Mufasa latest version is 2.4.6. please upgrade to include the fix

The version still have the error in some cases.

[wingkwong]

@uigywnkiub please share some steps for us to reproduce

[eaglit]

@uigywnkiub please share some steps for us to reproduce

using NextUI/AvatarGroup with next/image will cause this error React does not recognize the disableAnimation prop on a DOM element.

for example:

<AvatarGroup isBordered size='sm'> {images?.map((image, index) => ( <Avatar key={index} src={image} radius='sm' ImgComponent={Image} imgProps={{ width: 150, height: 150, blurDataURL }} /> ))} </AvatarGroup>

i haven't tested yet but i guess same issue happens when using @nextui-org/user component with next/image

[wingkwong]

@eaglit please share a sandbox

[Amanow01]

app-index.js:33 Warning: React does not recognize the Image prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase image instead. If you accidentally passed it from a parent component, remove it from the DOM element.
at a
at LinkComponent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/link.js:121:19)
at div
at nav
at Navbar (Server)
at div
at body
at html
at RootLayout (Server)
at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:585:13)
at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)



[wingkwong]

@Amanow01 please share the reproducible code.

[uigywnkiub]

@Amanow01 please share the reproducible code.

https://github.com/uigywnkiub/explend-app/blob/f1e8b1cbaf0bf0e98934dccb4a04cf7b6b2f84c8/app/ui/sidebar/user-profile-info.tsx

If I use Image, it get error disableAnimation props... so I used to regular img to avoid it.