search

storybookjs / storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
https://storybook.js.org
MIT License
84.44k stars 9.28k forks source link

[Bug]: Current version (v7.0.18) crashes React-Form-Hooks demos when using controls #22881

Open swernerx opened 1 year ago

swernerx commented 1 year ago

Describe the bug

There seems to be a crash when using React hook form in interaction with Storybook's controls. As far as I've seen so far, it's somehow related to the interaction with the refs that RHF sets on the native input element.

The browser (Chrome and Safari) hangs relatively quickly or reports a maximum call stack error after a short time.

image

To Reproduce

https://stackblitz.com/edit/github-9tkagt?file=tsconfig.json,src%2Fstories%2FForm.stories.tsx&preset=node

Then click on one of the controls to change the width.

System

Environment Info:

  System:
    OS: macOS 13.4
    CPU: (20) arm64 Apple M1 Ultra
  Binaries:
    Node: 18.16.0 - /opt/homebrew/opt/node@18/bin/node
    npm: 9.5.1 - /opt/homebrew/opt/node@18/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Firefox: 112.0.2
    Safari: 16.5

Additional context

This was not an issue with Storybook v6 as far as we know.

thexpand commented 1 year ago

Might be related to: https://github.com/storybookjs/storybook/issues/12747 and https://github.com/storybookjs/storybook/issues/19575

Mustakeem733 commented 9 months ago

Hi @shilman actually the solution for this issue is that we have to mention docs -> source -> type -> code, because by default its taking type as dynamic and that is creating error of circular dependency which is leading to stack overflow. I want to know that in sandbox I am able to change type in preview.ts file but unable to find that in code -> react-vite. Can you please help me to know the file so I can raise the Pr. @swernerx just change the type to code in preview.ts and code will work.