javascript - Why does React dev tools show my component as Anonymous?

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

const MyComponent = ...
export { MyComponent }

But if you change it to inline exporting:

export const MyComponent = ...

it displays the ponent name as Anonymous.

Is something wrong with inline exporting in general?

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

const MyComponent = ...
export { MyComponent }

But if you change it to inline exporting:

export const MyComponent = ...

it displays the ponent name as Anonymous.

Is something wrong with inline exporting in general?

Share Improve this question asked Mar 23, 2020 at 18:44 Boris Parfenenkov 3,2791 gold badge26 silver badges30 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 8

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

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/configuration/devtool/