phosphor-react-native icon indicating copy to clipboard operation
phosphor-react-native copied to clipboard

Storybook error: Element type is invalid: expected a string or a class/function but got: undefined.

Open spsaucier opened this issue 2 years ago • 4 comments

I'm trying to include Phosphor in a design system displayed in Storybook (web), but I'm getting this error whenever I include Phosphor icon:

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.

Has anyone else gotten this working in Storybook? Is there some change I should be making to .storybook/main.js to work with phosphor-react-native?

spsaucier avatar Dec 29 '23 20:12 spsaucier

For a temporary resolution, I've ended up installing @phosphor-icons/react and adding this to my .storybook/main.js addon options for @storybook/addon-react-native-web:

modulesToAlias: {
  'phosphor-react-native': '@phosphor-icons/react',
},

Downsides: The React web icons are not the same size as the RN ones.

spsaucier avatar Dec 29 '23 21:12 spsaucier

I'm having this issue while creating a web static project with expo

ChrisCoder9000 avatar Mar 23 '24 18:03 ChrisCoder9000

Same here. Not working on Storybook. =/

image

rodrix avatar May 29 '24 02:05 rodrix

Folks, this should be fixed by the 2.1 release. Can you please try again?

mrkpatchaa avatar Aug 17 '24 01:08 mrkpatchaa