In Storybook, the __docgenInfo property is added to the component object by the react-docgen library, which analyzes the component's source code and extracts its prop types and other metadata. This metadata includes the displayName property, which is why you can access it as child.type.__docgenInfo.displayName in Storybook.
Next.js, on the other hand, uses the babel-plugin-react-docgen Babel plugin to generate documentation for React components. This plugin generates the metadata as part of the component's code, which means that the displayName property is directly accessible as child.type.displayName in Next.js.
So, the reason why you need to use child.type.__docgenInfo.displayName in Storybook is that the displayName property is stored in the __docgenInfo property, which is generated by a library at runtime. In Next.js, the displayName property is stored directly in the component code, which means that it is directly accessible as child.type.displayName.
github-actions[bot]
commented
1 year ago
Changes:
In Storybook, the
__docgenInfoproperty is added to the component object by thereact-docgenlibrary, which analyzes the component's source code and extracts its prop types and other metadata. This metadata includes thedisplayNameproperty, which is why you can access it aschild.type.__docgenInfo.displayNamein Storybook.Next.js, on the other hand, uses the
babel-plugin-react-docgenBabel plugin to generate documentation for React components. This plugin generates the metadata as part of the component's code, which means that thedisplayNameproperty is directly accessible aschild.type.displayNamein Next.js.So, the reason why you need to use
child.type.__docgenInfo.displayNamein Storybook is that thedisplayNameproperty is stored in the__docgenInfoproperty, which is generated by a library at runtime. In Next.js, thedisplayNameproperty is stored directly in the component code, which means that it is directly accessible aschild.type.displayName.