noRefCheck functions on the Show Code

See original GitHub issue

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

image

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?

Issue Analytics

  • State:open
  • Created 2 years ago
  • Reactions:27
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
ShimiSuncommented, Aug 11, 2022

Joining the party with the same issue.

‘Show Code’ display: image

While only children are sent to the component: image

2reactions
aymenmensicommented, Aug 2, 2022

I have the same issue image Screenshot from 2022-08-02 09-52-50

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why reactstrap carousel code snippet on document is not ...
I have tried to reactstrap carousel. I copied some codes below it, and tried to use it in my codebase. Carousel tag begin...
Read more >
This is all great by the look and feel and I see the value.
It will just show `onChange={function noRefCheck() {}}`. All this forces me to think if Storybook is really a solution.
Read more >
react-element-to-jsx-string - npm.io
If a function is passed, it will be called for each prop with two arguments, ... If false, functions bodies are replaced with...
Read more >
react-formilicious - Storybook
... read the source code of the storybook as some things can not always be displayed in the "JSX" panel below(indicated by a...
Read more >
3ybt9srec - JavaScript - OneCompiler
_load (node:internal/modules/cjs/loader:822:12) at Function. ... The editor shows sample boilerplate code when you choose language as Javascript and start ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found