storybookjs/storybook

[Bug]: show code part shows React.Memo instead of the component name

Open

#26720 opened on Apr 3, 2024

View on GitHub
 (1 comment) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
block: sourcebughas workaroundhelp wantedreactsev:S3upgrade:8.x

Description

Describe the bug

When export the react component with memo like this

export default React.memo(Circle);

Then in the doc "show code" part, it shows as this:

In storybook 7, it shows correctly. But after upgrade to 8, then saw this issue.

To Reproduce

create any component and export with React.memo.

System

Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M2
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.15.4 - ~/Library/pnpm/pnpm <----- active
  Browsers:
    Chrome: 123.0.6312.87
    Safari: 17.4.1
  npmPackages:
    @storybook/addon-actions: ^8.0.5 => 8.0.5
    @storybook/addon-essentials: ^8.0.5 => 8.0.5
    @storybook/addon-links: ^8.0.5 => 8.0.5
    @storybook/blocks: ^8.0.5 => 8.0.5
    @storybook/react: ^8.0.5 => 8.0.5
    @storybook/react-vite: ^8.0.5 => 8.0.5
    storybook: ^8.0.5 => 8.0.5
    storybook-addon-deep-controls: ^0.6.1 => 0.6.1

Additional context

No response

Contributor guide

Tech stack
reacttypescript
Domain
frontenddocumentation
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Basic understanding of ReactFamiliarity with Storybook
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Investigate the code that renders the component name in the 'show code' panel. Look in the `lib/docs` or `addons/docs` directories for logic that extracts display names from React components. The issue likely stems from how `React.memo` is handled when displaying the component name. Check for any recent changes in version 8 that might have altered this behavior. The fix may involve ensuring that the display name from `React.memo` is correctly passed through.