先日、私のプロジェクトで「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でエクスポートしたため、これも同様に呼び出す必要があります。以上です。
これでエラーはおそらく解決するはずです。

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

exportの書き方ひとつでStorybookのビルドが止まる、というつまずきは、原因を知っていれば数分で済みます。私はこうした詰まりどころの切り分け方も含めて、SiiDで指導しています。

AIプログラミングスクール「SiiD」について

AIプログラミングスクール「SiiD」は、未経験からITエンジニア転職を目指す方向けのオンラインスクールです。

SiiDの特徴

  • 現役エンジニアでYouTube登録者約13万人の「セイト先生」が代表兼主任講師
  • 採用側の実務知見（2,000人以上の選考・150名以上のエンジニア採用）にもとづく指導
  • 生成AIを取り入れた学習設計と、実務レベルのフルスタックWeb開発スキル
  • Workship CAREER（株式会社GIG）と連携した無料の転職伴走支援
  • 経済産業省認定のReスキル講座で、給付金の条件を満たせば実質105,600円〜
  • 学割あり（35%オフ）

こんな方におすすめ

  • 未経験・文系・社会人からITエンジニア転職を本気で目指したい方
  • 独学に限界を感じている方
  • 費用を抑えながら実務スキルと転職サポートを両立したい方

「未経験だから」とあきらめる必要はありません。採用する側を知り尽くしたプロが、給付金で負担を抑えながら内定まで伴走します。