Clicky

Countermeasure for React component name written in TypeScript to be Unknown


Problem

With the React Developer Tools, you can check the components, but if you implement the component with TypeScript you may get .

In the following cases, and are supposed to be displayed originally but is displayed instead of .

img1

File

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>
  );
};

Measures

It does not export directly as follows, it assigns to the variable once with const and exports it. The sample repository is here.

If you export directly, the component name will be in React Developer Tools. If you set displayName like App.displayName = "App", even if you export directly, the component name will be entered.

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 };

img2

Version

React Developer Tools 2.5.2