storybook: Cannot read property 'displayName' of undefined
Describe the bug
Test suite failed to run
TypeError: Cannot read property 'displayName' of undefined
1 | import initStoryshots from '@storybook/addon-storyshots'
2 |
> 3 | initStoryshots({
| ^
4 | framework: 'react-native',
5 | })
6 |
at getDisplayName (node_modules/@emotion/primitives-core/dist/primitives-core.cjs.dev.js:232:64)
at Function.createStyledComponent (node_modules/@emotion/primitives-core/dist/primitives-core.cjs.dev.js:225:41)
at Object.<anonymous> (node_modules/@storybook/react-native/dist/preview/components/StoryListView/index.js:110:20)
at Object.<anonymous> (node_modules/@storybook/react-native/dist/preview/components/OnDeviceUI/index.js:46:45)
at Object.<anonymous> (node_modules/@storybook/react-native/dist/preview/index.js:58:42)
at Object.<anonymous> (node_modules/@storybook/react-native/dist/index.js:12:39)
at Object.load (node_modules/@storybook/addon-storyshots/dist/frameworks/rn/loader.js:36:29)
at loadFramework (node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:31:17)
at Object.testStorySnapshots [as default] (node_modules/@storybook/addon-storyshots/dist/api/index.js:53:36)
at Object.<anonymous> (__tests__/storyshots.spec.ts:3:15)
System:
- OS: MacOS
- Framework: React Native 0.59.10
- Addons: Storyshots
- Version: “@storybook/addon-storyshots”: “5.1.9” “@storybook/react-native”: “5.1.9”
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 15 (3 by maintainers)
In my case I got the error by importing {Component} instead of Componet without the curly braces
In my case it was because I imported the component as a named import instead of default import.
So I fixed it from this:
To this:
Check the components you are importing. If they are undefined then you will get this error.
Seems like the cache is messing up somehow. Removing the npm cache and restarting storybook solves things, but the problem comes back.
@stereodenis I appear to be facing this same issue - how was it resolved for you?
I had the same issue, in my case it was indeed due to an imported module being undefined in one of my deeply nested components. The error is pretty cryptic and did not lead me to the actual bug at all. I was able to debug it by commenting and uncommenting code to check when it is working and when it is not.
For me, this was happening on the initial render, but if I changed anything in the corresponding component (which possibly lead to re-loading the incorrect module), it reloaded the UI due to HMR, and it worked fine. This was happening / breaking when I refreshed the page as well.
The problematic module was using some global variables, which were not defined in storybook webpack. Once that was fixed, this problem went away.
Still don’t know why it did not work initially, but worked on HMR (after making any random changes in the files, which lead to re-building the module once again i guess)
Remove your child components one by one, as this will help you identify which one is missing a property.