How do I name my React Component in Webpack export?-CodePudding

I have tested a range of possible Webpack configurations to ensure my component is named when I build my React component. However, I am still met with this PropTypes error:

Warning: Failed prop type: The prop `name` is marked as required in `w`, but its value is `undefined`.

How do rename my component in an export so that this error would read:

Warning: Failed prop type: The prop `name` is marked as required in `CustomName`, but its value is `undefined`.

I'd like the reference to be customised instead of w. I'm finding Webpack's documentation to be a little unclear.

CodePudding user response：

The reason this happens is because Webpack minifies your code such that the name of your component (which is just like any variable) is changed to a shorter version in order to make the bundle smaller.

You have to manually set this as a static property on your component:

const Customised = () => {
  // Your component
}

Customised.displayName = "Customised"

You can often find plugins for your build tooling (e.g. babel, esbuild) to do this automatically.