How to fix the error “Cannot read property ‘displayName’ of undefined” in a project with Storybook and React?

The other day, I got the error “Cannot read property ‘displayName’ of undefined” in my project.

The specs of my project are as follows…

• Storybook (6.2.7)
• Next.js (10.1.3)
• React (17.0.2)
• TypeScript (4.2.4)

When I met the error, I’d been in the struggle for a long time since I couldn’t find solutions on Google…

However, I eventually was successful to complete it. Actually, I have some doubts about this way a little bit but it solved the error anyway. So I can show it to you. This is the process.

Let me show a pair of parent and child components.

// ChildComponent.tsx
import React from 'react'
const ChildComponent: React.FC = () => {
  ...
}
ChildComponent.displayName = 'ChildComponent'
export { ChildComponent }

The substantial codes in the ChildComponent are the last 2 lines.

ChildComponent.displayName = 'ChildComponent'

This part will be fixed the error ‘displayName’ of undefined”.

export { ChildComponent }

And you need to use Named exports because you coded the property of displayName above.

// ParentComponent.tsx
import React from 'react'
import { ChildComponent } from './ChildComponent'
const ParentComponent: React.FC = () => {
  ...
  return (
    <>
      <ChildComponent />
    </>
  )
}

The idea that I want to mention to you in ParentComponent is only one.

import { ChildComponent } from './ChildComponent'

As you exported ChildComponent with Named exports, you have to call it alike, too.

That’s it. Have a good coding!