Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Storybook fails to regenerate react docs in HMR - v7 #21729

Open
MarioSimou opened this issue Mar 22, 2023 · 7 comments
Open

[Bug]: Storybook fails to regenerate react docs in HMR - v7 #21729

MarioSimou opened this issue Mar 22, 2023 · 7 comments

Comments

@MarioSimou
Copy link

Describe the bug

I am trying the latest storybook version and came across an issue that took me a while to find. When am running storybook in dev mode, using vite as a framework, any change I make on my code is tracked and triggers a HMR. Essentially, this is an HTTP request that fetches the latest changes of my component. As long as I am not changing anything related to the types of my component, the component will run as expected and I won't notice any issues, but if I change the types of my component, the react-docgen fails to trigger and updates the docs of my component. In order to pull the latest type changes, I need to restart the storybook server, which is not very convenient

To Reproduce

  1. Run storybook server with yarn storybook.
  2. Navigate to http://localhost:6006 and select the Button story.
  3. Open the Button.tsx file and add update the ButtonProps type adding a new property. Add a console.log somewhere within the compoent using the new prop.
  4. Save the file and move back to the browser. You should see a new line in the terminal saying hmr update and a new request triggered in the Network tab related to Button.tsx file. Even if the new file includes the new logic I have added in my component, react-docgen didn't trigger a new generation, meaning that the docs still lacking the new prop I have added

Repository

bug-2
bug-4

System

Environment Info:

  System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 PRO 6850U with Radeon Graphics
  Binaries:
    Node: 18.14.2 - ~/.nvm/versions/node/v18.14.2/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.14.2/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.14.2/bin/npm
  Browsers:
    Chrome: 108.0.5359.124
    Firefox: 111.0
  npmPackages:
    @storybook/addon-essentials: ^7.0.0-rc.5 => 7.0.0-rc.5 
    @storybook/addon-interactions: ^7.0.0-rc.5 => 7.0.0-rc.5 
    @storybook/addon-links: ^7.0.0-rc.5 => 7.0.0-rc.5 
    @storybook/blocks: ^7.0.0-rc.5 => 7.0.0-rc.5 
    @storybook/react: ^7.0.0-rc.5 => 7.0.0-rc.5 
    @storybook/react-vite: ^7.0.0-rc.5 => 7.0.0-rc.5 
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1

Additional context

No response

@MarioSimou MarioSimou changed the title [Bug]: Storybook fails to regenerate react docs in HMR [Bug]: Storybook fails to regenerate react docs in HMR - v7 Mar 22, 2023
@valentinpalkovic
Copy link
Contributor

valentinpalkovic commented Apr 6, 2023

@william-will-angi
Copy link

Also, experiencing this issue. It makes it very frustrating to iterate on documentation.

@valentinpalkovic do you know much about what needs to be done to fix that bug? I would be happy to make a contribution if I knew where I should be looking

@valentinpalkovic
Copy link
Contributor

@william-will-angi The Vite Plugin only instantiates the Typescript builder in the very beginning and doesn't launch a watcher, which takes care of updates. There were attempts to fix this issue: joshwooding/vite-plugin-react-docgen-typescript#17 and joshwooding/vite-plugin-react-docgen-typescript#20. But both provided solutions drastically increased build time and are therefore not manageable. That was also the reason why joshwooding/vite-plugin-react-docgen-typescript#17 was reverted.

@vanessayuenn vanessayuenn closed this as not planned Won't fix, can't repro, duplicate, stale Jul 24, 2023
@vanessayuenn
Copy link
Contributor

Since the issue lies in the vite plugin, I'll close this issue now. Please let me know if you think there's something else that can be done here.

@htmlin
Copy link

htmlin commented Sep 12, 2023

@william-will-angi The Vite Plugin only instantiates the Typescript builder in the very beginning and doesn't launch a watcher, which takes care of updates. There were attempts to fix this issue: joshwooding/vite-plugin-react-docgen-typescript#17 and joshwooding/vite-plugin-react-docgen-typescript#20. But both provided solutions drastically increased build time and are therefore not manageable. That was also the reason why joshwooding/vite-plugin-react-docgen-typescript#17 was reverted.

@valentinpalkovic
https://github.com/joshwooding/vite-plugin-react-docgen-typescript/releases/tag/v0.2.3
It seems that joshwooding/vite-plugin-react-docgen-typescript has released a new version to fix the problem. Can we upgrade it again?

@joshwooding
Copy link
Member

I've released a snapshot to test my changes and make sure they don't have a huge performance impact

@joshwooding/vite-plugin-react-docgen-typescript@0.0.0-snapshot-20231005222330

@kasperpeulen kasperpeulen reopened this Sep 23, 2024
@kasperpeulen
Copy link
Contributor

kasperpeulen commented Sep 23, 2024

We are reverting this change, as it was too slow in many projects.

#29184

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Development

No branches or pull requests

8 participants