Cannot read property 'displayName' of undefined

[stereodenis]

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"

[stereodenis]

@benoitdion @Gongreg
workaround
node_modules/@emotion/primitives-core/dist/primitives-core.cjs.dev.js:221

node_modules/@storybook/react-native/dist/preview/components/StoryListView/index.js:111

[stereodenis]

if I change behavior to this

var getDisplayName = function getDisplayName(primitive) {
  if (primitive === undefined) { return 'Styled' }
  return typeof primitive === 'string' ? primitive : primitive.displayName || primitive.name || 'Styled';
};

I got this error

Test suite failed to run

node_modules/react-native-swipe-gestures/index.js:3
    import React, {Component} from 'react';
           ^^^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:471:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:513:25)
      at Object.<anonymous> (node_modules/@storybook/react-native/dist/preview/components/OnDeviceUI/navigation/index.js:38:56)

[stereodenis]

Then, I've changed my jest.config.js

transform: {
    "^.+\\.(t|j)sx?$": "ts-jest"
  }

And got this

console.error node_modules/react/cjs/react.development.js:188
    Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
    
    Check the render method of `Presenter`.
        in Presenter

[DuncanLewis]

@stereodenis I appear to be facing this same issue - how was it resolved for you?

[cam-shaw]

I've run into this issue as well. @stereodenis since you've closed the problem, would you be able to explain what fixed it please?

[pak11273]

Check the components you are importing. If they are undefined then you will get this error.

[duilio92]

In my case I got the error by importing {Component} instead of Componet without the curly braces

[liranh85]

In my case it was because I imported the component as a named import instead of default import.

So I fixed it from this:

import { Button } from './Button';

To this:

import Button from './Button';

[marcusstenbeck]

Seems like the cache is messing up somehow. Removing the npm cache and restarting storybook solves things, but the problem comes back.

rm -rf ./node_modules/.cache
yarn storybook

[gaurav5430]

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)

[iredmedia]

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.

Same thing was happening to me, ends up i was including something that was exported from another file that imported redux store/history, and this was a big no-no. If you file interacts with redux prepare for pain (unless you're using providers which I don't want to do).

[ashishsah1998]

My file name was ReservationPassengersTrain.tsx it did not worked.
When I changed the file and function names to Passengers.tsx things are working fine.
I guess storybook doesn't allow such a long file naming structure.

[dalmo3]

For what it's worth, I randomly got this error and it went away just by restarting storybook. (v6.3.7)

[danleitch]

Check the components you are importing. If they are undefined then you will get this error.

This solved this error for me, I had to dig deep to find the component.

[matteusbarbosa]

Remove your child components one by one, as this will help you identify which one is missing a property.