[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]

Describe the bug

Since updating from v5.0.1 to 5.1.0 (without any other changes) I get this warning in the console:

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.
    at svg
    at IconBase
    at HiMiniMinusSmall
    at span
    at button
    at http://localhost:5173/node_modules/.vite/deps/chunk-PFNJO5YQ.js?v=c35eb10d:1114:17
    at div
    at http://localhost:5173/src/components/Tree/Node.tsx:43:7
    at http://localhost:5173/src/components/Tree/Projects.tsx:26:20
    at div
    at _c (http://localhost:5173/src/components/Tree/index.tsx:33:11)
    at div
    at http://localhost:5173/node_modules/.vite/deps/allotment.js?v=7474521f:1330:14
    at div
    at div
    at http://localhost:5173/node_modules/.vite/deps/allotment.js?v=7474521f:1338:13
    at div
    at http://localhost:5173/src/components/LayoutProtected/Main.tsx:37:30
    at http://localhost:5173/src/components/ProtectedRoute.tsx:22:50
    at _c
    at provider (http://localhost:5173/node_modules/.vite/deps/electric-sql_react.js?v=a48291d8:25:23)
    at http://localhost:5173/src/ElectricWrapper.tsx:32:52
    at E4 (http://localhost:5173/node_modules/.vite/deps/@corbado_react.js?v=b76ad7ae:7741:23)
    at y4 (http://localhost:5173/node_modules/.vite/deps/@corbado_react.js?v=b76ad7ae:7735:23)
    at http://localhost:5173/node_modules/.vite/deps/@corbado_react.js?v=b76ad7ae:3025:36
    at h2 (http://localhost:5173/node_modules/.vite/deps/@corbado_react.js?v=b76ad7ae:3032:23)
    at p2 (http://localhost:5173/node_modules/.vite/deps/@corbado_react.js?v=b76ad7ae:3033:23)
    at A3 (http://localhost:5173/node_modules/.vite/deps/@corbado_react.js?v=b76ad7ae:7758:23)
    at _c
    at RenderedRoute (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=019d804e:3560:5)
    at RenderErrorBoundary (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=019d804e:3520:5)
    at DataRoutes (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=019d804e:4670:5)
    at Router (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=019d804e:3938:15)
    at RouterProvider (http://localhost:5173/node_modules/.vite/deps/react-router-dom.js?v=019d804e:4487:5)
    at div
    at div
    at TextDirectionProvider (http://localhost:5173/node_modules/.vite/deps/chunk-SO4N57FY.js?v=c35eb10d:12940:3)
    at http://localhost:5173/node_modules/.vite/deps/@fluentui_react-components.js?v=57078e6d:608:17
    at App

I happens when this component renders.

The prop is visible in the svg here:

Expected behavior

no such warning

Minimal sample repository URL

https://github.com/barbalex/ps

Steps To Reproduce

Sorry, I am not versed in quickly building examples

Package version

5.1.0

Relevant log output

No response

Additional context

No response

[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?

[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.

[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.

[kamijin-fanta]

v5.2.0 released!

[LZL0]

v5.2.0 released!

Thank you!