search

formaat-design / reshaped

Community repository for storing examples, reporting issues and tracking roadmap
https://reshaped.so
97 stars 3 forks source link

Issue when using icons from external lib with svg prop of Icon component #205

Closed its-monotype closed 6 months ago

its-monotype commented 6 months ago

When I try to pass it like that:

import { CreditCard } from 'react-feather';
...
<Icon
  svg={CreditCard}
/>
...

I got this error:

The above error occurred in the <span> component:

    at span
    at Icon (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:583:16)
    at div
    at View (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:415:5)
    at div
    at View (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:415:5)
    at div
    at div
    at div
    at div
    at div
    at PortalScope (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:2167:11)
    at div
    at Theme (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:2076:11)
    at Portal (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:2161:11)
    at Overlay (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:3757:11)
    at Modal (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:3903:11)
    at PaymentModal (http://localhost:5173/src/components/PaymentModal/PaymentModal.tsx?t=1702683716028:14:32)
    at div
    at View (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:415:5)
    at Container (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:3508:11)
    at ToastProvider (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:4448:11)
    at SingletonHotkeysProvider (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:1377:11)
    at ReshapedInner (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:4508:11)
    at div
    at Theme (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:2076:11)
    at GlobalColorMode (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:2123:11)
    at Reshaped (http://localhost:5173/node_modules/.vite/deps/reshaped.js?v=c154eb05:4522:11)
    at App (http://localhost:5173/src/App.tsx?t=1702683716028:42:61)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
eval @ VM3570:1
overrideMethod @ console.js:213
logCapturedError @ chunk-TU7FDOKZ.js?v=c154eb05:14034
update.callback @ chunk-TU7FDOKZ.js?v=c154eb05:14054
callCallback @ chunk-TU7FDOKZ.js?v=c154eb05:10509
commitUpdateQueue @ chunk-TU7FDOKZ.js?v=c154eb05:10526
commitLayoutEffectOnFiber @ chunk-TU7FDOKZ.js?v=c154eb05:17081
commitLayoutMountEffects_complete @ chunk-TU7FDOKZ.js?v=c154eb05:17974
commitLayoutEffects_begin @ chunk-TU7FDOKZ.js?v=c154eb05:17963
commitLayoutEffects @ chunk-TU7FDOKZ.js?v=c154eb05:17914
commitRootImpl @ chunk-TU7FDOKZ.js?v=c154eb05:19347
commitRoot @ chunk-TU7FDOKZ.js?v=c154eb05:19271
finishConcurrentRender @ chunk-TU7FDOKZ.js?v=c154eb05:18754
performConcurrentWorkOnRoot @ chunk-TU7FDOKZ.js?v=c154eb05:18712
workLoop @ chunk-TU7FDOKZ.js?v=c154eb05:195
flushWork @ chunk-TU7FDOKZ.js?v=c154eb05:174
performWorkUntilDeadline @ chunk-TU7FDOKZ.js?v=c154eb05:382
Show 16 more frames
Show less
chunk-TU7FDOKZ.js?v=c154eb05:20437 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    at createFiberFromTypeAndProps (chunk-TU7FDOKZ.js?v=c154eb05:20437:25)
    at createFiberFromElement (chunk-TU7FDOKZ.js?v=c154eb05:20458:23)
    at reconcileSingleElement (chunk-TU7FDOKZ.js?v=c154eb05:11799:31)
    at reconcileChildFibers2 (chunk-TU7FDOKZ.js?v=c154eb05:11836:43)
    at reconcileChildren (chunk-TU7FDOKZ.js?v=c154eb05:14290:37)
    at updateHostComponent (chunk-TU7FDOKZ.js?v=c154eb05:14800:11)
    at beginWork (chunk-TU7FDOKZ.js?v=c154eb05:15921:22)
    at beginWork$1 (chunk-TU7FDOKZ.js?v=c154eb05:19747:22)
    at performUnitOfWork (chunk-TU7FDOKZ.js?v=c154eb05:19192:20)
    at workLoopSync (chunk-TU7FDOKZ.js?v=c154eb05:19131:13)

But if I create my icon like that:

export const MyIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    strokeWidth="2"
    stroke="currentColor"
    fill="none"
    strokeLinecap="round"
    strokeLinejoin="round"
  >
    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
    <path d="M12 21a9 9 0 1 1 0 -18a9 9 0 0 1 0 18z" />
    <path d="M10 10c-.5 -1 -2.5 -1 -3 0" />
    <path d="M17 10c-.5 -1 -2.5 -1 -3 0" />
    <path d="M14.5 15a3.5 3.5 0 0 1 -5 0" />
  </svg>
);

it works fine like this:

<Icon svg={MyIcon} />

also for some reason typeof external icon: is 'object' and my icon is 'function'

To make an icon from external lib work I should pass it like this:

import { CreditCard } from 'react-feather';
...
<Icon
  svg={<CreditCard />}
/>
...

Is this the intended behavior?

blvdmitry commented 6 months ago

Definitely not intended. I was checking for the object type in the Icon component but that definitely doesn't work in old libraries where propTypes are used. I've updated the type checking and tested in the codesandbox, so it should work in 2.7.4 now