Why does React dev tools show my component as Anonymous?

Question

React dev tools works perfectly (properly shows the name of the component in components tab) when you have something like:

const MyComponent = ...
export { MyComponent }

But if you change it to inline exporting:

export const MyComponent = ...

it displays the component name as Anonymous.

Is something wrong with inline exporting in general?

Answer 1

For inline exporting you need to manually specify the displayName property (I know, it's a pain).

So you do

    export const MyComponent = () => {
      //stuff happens here
    }

    MyComponent.displayName = "MyComponent";

Answer 2

If it's still not resolved as it wasn't for me, I found a workaround, I added -

devtool: 'eval-cheap-module-source-map'

to my webpack.config.js and make sure to start the webpack build after adding the property.

Before adding the devtool.

After adding the devtool.

source: https://webpack.js.org/configuration/devtool/