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

Seito Horiguchi
1 min readMay 5, 2021

--

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.tsximport 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.tsximport 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!

--

--

Seito Horiguchi

Hi, I'm a Web developer and Tech YouTuber ;) I mainly code JS, TS, and Python. https://www.linkedin.com/in/seito/