search

tailwindlabs / heroicons

A set of free MIT-licensed high-quality SVG icons for UI development.
https://heroicons.com
MIT License
21.03k stars 1.27k forks source link

e Warning: React does not recognize the `dataSlot` prop on a DOM element #1164

Closed barbalex closed 2 months ago

barbalex commented 2 months ago

Describe the bug

Since updating react-icons from v5.0.1 to 5.1.0 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:

Screenshot 2024-04-15 134257

Others have encountered the issue too: https://github.com/react-icons/react-icons/issues/931

It seems this stems from here: https://github.com/tailwindlabs/heroicons/blob/master/svgo.20.solid.mjs#L20

Expected behavior

no such warning

barbalex commented 2 months ago

Hm. data-slot is not dataSlot. Maybe the issue is in react-icons after all?

thecrypticace commented 2 months ago

Hey, this isn't our issue. The library is copying/republishing our icons but not handling them right: https://github.com/react-icons/react-icons/blob/95168b93ee6b5813259392c2cc477bfa43beb238/packages/react-icons/scripts/logics.ts#L45

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

barbalex commented 2 months ago

Thanks for pointing this out!