[Storybook] Error "Cannot read property 'displayName' of undefine"

先日、私のプロジェクトで「Cannot read property 'displayName' of undefined」というエラーが発生しました。
使用していた技術は以下の通りです...

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

最終的に解決することができました。
少々疑問は残りますが、とにかくエラーは解消されました。というわけで、その一部始終をお見せします。

ある親コンポーネントと子コンポーネントのペアのコードを見てください。

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

ChildComponent.displayName = 'ChildComponent'
export { ChildComponent }

とくに最後の2行が重要です。

ChildComponent.displayName = 'ChildComponent'
export { ChildComponent }

ここでdisplayNameを指定することで、 ‘displayName’ of undefined でなくなります。
と同時に、これを追記した場合はNamed exportsを使用する必要が発生します。

続いて、親コンポーネント。

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

このソースコードで重要なのは2行目。

import { ChildComponent } from './ChildComponent'

ChildComponentをNamed exportsでエクスポートしたため、これも同様に呼び出す必要があります。以上です。
これでエラーはおそらく解決するはずです。

それでは、よいコーディングライフを！