[Bug]: console.js:213 Warning: React does not recognize the `dataSlot` prop on a DOM element. Since update 5.0.1 to 5.1.0

[barbalex]

[Bug]: console.js:213 Warning: React does not recognize the `dataSlot` prop on a DOM element. Since update 5.0.1 to 5.1.0

[barbalex]

So it seems the problem is in react-icons: tailwindlabs/heroicons#1164 (comment):

Hey, this isn't our issue. The library is copying/republishing our icons but not handling them right:

react-icons/packages/react-icons/scripts/logics.ts

Line 45 in 95168b9

const newName = name.startsWith("aria-") ? name : camelcase(name);

That script should not convert any data attributes to camel case.

From looking at this code I feel that besides aria-, also data--attributes should not be camel-cased.

[kamijin-fanta]

v5.2.0 released!

[peroperje]

The same situation

[pdchouse]

same here with nextjs v14.2.1

[ochoadan]

Getting it with: import {HiOutlineEnvelope} from "react-icons/hi2";
Solution: use other icons.

[nejcm]

It is not just that icon. I am getting it with multiple different ones.

[luc345]

Same issue,

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

thanks

[michaelboke]

I noticed it too, i'm using a lot of the hero icons v2

I checked the hi2 repo and found for example this
https://github.com/tailwindlabs/heroicons/blob/master/svgo.20.solid.mjs has a custom attribute for the data-slot = icon. Is there a way to ignore or unset those properties

[barbalex]

I noticed it too, i'm using a lot of the hero icons v2

I checked the hi2 repo and found for example this https://github.com/tailwindlabs/heroicons/blob/master/svgo.20.solid.mjs has a custom attribute for the data-slot = icon. Is there a way to ignore or unset those properties

Thanks @michaelboke , I created an issue over there: tailwindlabs/heroicons#1164.
Though: they use data-slot, not dataSlot. So maybe the issue is in react-icons after all?

[ashish-ts]

Got same issue after updating react-icons from 5.0.1 to 5.1.0

For temporary solution downgrade it to 5.0.1 and the issue is resolved.

[LZL0]

v5.2.0 released!

Thank you!