TypeScript で書いた React コンポーネント名が Unknown になる対策

問題

React Developer Tools を用いると、コンポーネントの確認が出来ますが、TypeScript でコンポーネントを実装していると <Unknown> という表示になってしまうことがあります。

以下の場合、本来であれば <Foo> と <Bar> と表示されて欲しいところですが <Bar> ではなく <Unknown> と表示されてしまいます。

ファイル

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Foo } from "./components/Foo";
import { Bar } from "./components/Bar";

ReactDOM.render(
  <div>
    <Foo />
    <Bar />
  </div>,
  document.getElementById("root")
);

components/Foo.tsx

import * as React from "react";

const Foo = () => {
  return (
    <div>
      <p>foo</p>
    </div>
  );
};

export { Foo };

components/Bar.tsx

import * as React from "react";

export const Bar = () => {
  return (
    <div>
      <p>bar</p>
    </div>
  );
};

対策

以下のように、直接 export せず、一度 const で変数に代入してから export するようにしています。
サンプルリポジトリは こちら です。

直接 export してしまうと React Developer Tools でコンポーネント名が <Unknown> になってしまいます。
なお App.displayName = "App" のように displayName を設定する場合は、直接 export してもコンポーネント名が入ります。

NG

components/Bar.tsx

import * as React from "react";

export const Bar = () => {
  return (
    <div>
      <p>bar</p>
    </div>
  );
};

OK

components/Bar.tsx

import * as React from "react";

const Bar = () => {
  return (
    <div>
      <p>bar</p>
    </div>
  );
};

export { Bar };

バージョン

• React Developer Tools 2.5.2