noRefCheck functions on the Show Code

[Smankusors]

Describe the bug
I found something weird when reading the code generated on Storybook, that is every function that I didn't define, shows up as noRefCheck. Even though if I set it manually as undefined.

But no, that's just a background, and I believe that issue might have to do with the react-element-to-jsx-string. The actual issue, is that the first function is always written as () => {} while the rest functions would be written as function noRefCheck() {}. Now that's pretty weird behaviour IMO. Please take a look at this built-in example (?) below

Now... isn't that code should be like this below?

<Header
  onCreateAccount={() => {}}
  onLogin={() => {}}
  onLogout={() => {}}
  user={{
    name: 'Jane Doe'
  }}
/>

it looks more pretty.

To Reproduce
I don't think I need to create a repo for this. I just simply:

1. Run npx create-react-app
2. Run npx sb init
3. Run npm run storybook
4. Wait, and open EXAMPLE > Header

System

Environment Info:

  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i7-4720HQ CPU @ 2.60GHz
  Binaries:
    Node: 16.6.0 - A:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.24.1 - A:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 99.0.4844.51
    Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.39)
  npmPackages:
    @storybook/addon-actions: ^6.4.19 => 6.4.19
    @storybook/addon-essentials: ^6.4.19 => 6.4.19
    @storybook/addon-interactions: ^6.4.19 => 6.4.19
    @storybook/addon-links: ^6.4.19 => 6.4.19
    @storybook/builder-webpack5: ^6.4.19 => 6.4.19
    @storybook/manager-webpack5: ^6.4.19 => 6.4.19
    @storybook/node-logger: ^6.4.19 => 6.4.19
    @storybook/preset-create-react-app: ^4.0.1 => 4.0.1
    @storybook/react: ^6.4.19 => 6.4.19
    @storybook/testing-library: ^0.0.9 => 0.0.9

Additional context
I think I found the culprit, just replace the replace with replaceAll. If you allow, I can create a PR to fix this including adding a new unit test to cover this one. wdyt?

[aymenmensi]

I have the same issue

[ShimiSun]

Joining the party with the same issue.

'Show Code' display:

While only children are sent to the component:

[365kim]

I'm just facing the same issue. Seems like @Smankusors has already found out how to fix this...? 🙏

[zhyd1997]

PR: #19004

[baptisteArno]

Facing the same issue 👀

[iosifnicolae2]

Any news on this issue? It would be awesome if we can gave good code export functionality.

Thank you!

[HemendraKhatik]

any update I'm facing the same issue

[zhyd1997]

@iosifnicolae2 @HemendraKhatik

PR #19004

[viniisdsc]

Same issue here.

[zhyd1997]

Hi @viniisdsc

Did you try the latest version of storybook?

And what does your Button component look like?

[dennisschroer]

We also have this issue. Running version 6.5.13

[zhyd1997]

@dennisschroer

Please try the prerelease version: v7.0.0-alpha.46

[jacobrask]

Still seeing this in 7.0.18.

[jake-chapman-mark43]

Ditto, We're still seeing this in 7.0.18 as well.

[donaldpipowitch]

We see this in 7.1.0 since we set docs: { source: { type: "dynamic" }, },.

[thisisanto]

I'm also suffering from this in 7.6.16, however, for me it appears to be due to a missing space.

In everyone's screenshots, function noRefCheck() {} is rendered, however for me function noRefCheck(){}, so for my case the fix was quite simple, and I raised a PR here #26104.

[thisisanto]

v8.0.0 has been released and contains my fix #26104 , which resolved this issue for me.
Try upgrading as it might fix yours too 🤞🏼 if enough people confirm we can close this issue