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.

Sign up for GitHub

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

Jump to bottom

[Bug]: After upgrade to 7.4.4 browser hangs #24273

Closed
GarrisonD opened this issue Sep 22, 2023 · 14 comments
Closed

[Bug]: After upgrade to 7.4.4 browser hangs #24273

GarrisonD opened this issue Sep 22, 2023 · 14 comments
Labels
bug needs triage

Comments

@GarrisonD
Copy link

Describe the bug

I upgraded to the latest version (7.4.4) with npx storybook@latest upgrade and now it's unusable.

After any interaction (theme switching or trying to visit another story) browser shows me the Page Unresponsive modal.

On 7.4.1 everything works like a charm.

To Reproduce

No response

System

Environment Info:

  System:
    OS: macOS 13.5.2
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.8.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 117.0.5938.88
    Firefox: 115.0.3
    Safari: 16.6

Additional context

No response
@GarrisonD
Copy link
Author

Tested with 7.4.3 - no issues 👍

@sirtobey
Copy link

Same issue here.

@Wymowny
Copy link

Wymowny commented Sep 22, 2023 •
edited
Loading

Same issue, logged in the console every ~500ms (all stories):

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
    in Unknown (created by Downshift2)
    in div
    in Unknown (created by Downshift2)
    in div (created by Styled(div))
    in Styled(div) (created by Downshift2)
    in Downshift2
    in Unknown
    in div (created by Styled(div))
    in Styled(div) (created by Spaced)
    in Spaced (created by Styled(Spaced))
    in Styled(Spaced)
    in div (created by ForwardRef(F2))
    in div (created by ForwardRef(F2))
    in ForwardRef(F2) (created by Scroller)
    in Suspense (created by Scroller)
    in Scroller (created by Styled(Scroller))
    in Styled(Scroller)
    in nav (created by Styled(nav))
    in Styled(nav)
    in Unknown
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer
    in Unknown (created by Layout)
    in div (created by Styled(div))
    in Styled(div) (created by Sidebar)
    in Sidebar (created by Layout)
    in Layout (created by WithTheme(Layout))
    in WithTheme(Layout)
    in Unknown (created by App)
    in div (created by Styled(div))
    in Styled(div) (created by App)
    in App
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by QueryLocation)
    in QueryLocation (created by Main2)
    in Main2 (created by Root4)
    in Router (created by LocationProvider)
    in LocationProvider (created by Root4)
    in HelmetProvider (created by Root4)
    in Root4

@mnicholstamu
Copy link

I just moved our storybook back down to 7.4.3 as well and have had zero issues.

@coding-tomato
Copy link

Same issue here, seems like the issue is related to PostCSS, once I remove the addon Storybook works again in 7.4.4

Downgraded to 7.4.3 and started working again, this seems like a pretty big problem affecting all Tailwind users!

@mnicholstamu
Copy link

Same issue here, seems like the issue is related to PostCSS, once I remove the addon Storybook works again in 7.4.4

Downgraded to 7.4.3 and started working again, this seems like a pretty big problem affecting all Tailwind users!

I removed the a11y plugin and it seemed to do the trick.

@coding-tomato
Copy link

Pardon me, I meant @storybook/addon-styling rather than PostCSS.

@terrymun
Copy link

terrymun commented Sep 23, 2023 •
edited
Loading

We are also experiencing the same issue with 7.4.4, and this is the list of addons we have:

  • @storybook/addon-a11y
  • @storybook/addon-essentials
  • @storybook/addon-interactions
  • @storybook/addon-docs
  • @storybook/addon-themes

Removing @storybook/addon-a11y did not work for us @mnicholstamu, but when I removed @storybook/addon-themes then our storybook preview and build start working again. Do you by any chance have @storybook/addon-a11y as the last addon defined in the array?

Either that, or downgrading back to 7.4.3 also helps :)

@gregegan
Copy link

We are also experiencing the same issue with 7.4.4, and this is the list of addons we have:

  • @storybook/addon-a11y
  • @storybook/addon-essentials
  • @storybook/addon-interactions
  • @storybook/addon-docs
  • @storybook/addon-themes

Removing @storybook/addon-a11y did not work for us @mnicholstamu, but when I removed @storybook/addon-themes then our storybook preview and build start working again. Do you by any chance have @storybook/addon-a11y as the last addon defined in the array?

Either that, or downgrading back to 7.4.3 also helps :)

I can confirm also that @storybook/addon-themes is causing the issue with the browser timeout Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

image

@boar-is boar-is mentioned this issue Sep 23, 2023
Closed
@codeth
Copy link

codeth commented Sep 24, 2023

I'm also hitting this issue.

Based on the error message in the console, I'm guessing it was this change in the 7.4.4 release, because useEffect should always have a dependency array, even if it's empty - https://github.com/storybookjs/storybook/pull/24237/files#diff-8e32cce628af3c63ddc47847b2c89d91619bd9ea0ef43b5e2045fbbc70bf4fb8R412

@MarcelKnobelsdorf
Copy link

Its fixed with 7.4.5
a3cdabb

@terrymun
Copy link

Thanks @MarcelKnobelsdorf :) Can confirm that 7.4.5 works 🚀

@mnicholstamu
Copy link

That did it! Thank you @MarcelKnobelsdorf.

coopbri added a commit to animareflection/ui that referenced this issue Sep 25, 2023
@coopbri
chore(storybook): enable '@storybook/addon-a11y' (storybookjs/storybo…
2ad0fab 
…ok#24273)
@gregegan
Copy link

Confirmed! Thank you!

hobbescodes added a commit to animareflection/ui that referenced this issue Sep 27, 2023
@hobbescodes @coopbri
Minimize Library Entry Points with Client Component Focus (#130)
640aed8 
* refactor(components): move components into single entry point

* refactor(components): move primitives into the universal entry point

* refactor(examples): update apps to use new entry points

* fix(storybook): disable a11y addon temporarily

* fix(examples): correctly use ESM resolution with TypeScript

* docs(usage): update TS ESM resolution details

* fix(storybook): update introduction story imports

* build(deps): upgrade dependencies

* chore(storybook): enable '@storybook/addon-a11y' (storybookjs/storybook#24273)

* docs(usage): add required dependencies to install instructions

* fix(tests): fix broken tests

* fix(numberInput): fix stepper icon rendering issues

* refactor(storybook): update component organization

* refactor(recipes): update recipes to use ark anatomy when applicable

* refactor(stat): update storybook directory

* refactor(numberInput): update component to allow for correct focus styles downstream

* fix(globalCss): remove explicit typing

* fix: fix button TS issues, fix 'NumberInput' tests

* refactor(accordion): update accordion recipe

* build(deps): updata pandacss dependency

* refactor(drawer): update recipe

* refactor(flyout): update recipe

* refactor(radioGroup): update recipe

* refactor(tooltip): update component

* fix: temporarily fix portal and/or ref issue for certain components

* refactor(modal): update recipe

* refactor(examples): add use client directive to 'CardDemo'

* ci(changesets): add changeset for library structure refactor

* ci(changsets): prefix changeset with 'Breaking:'

* fix: update component and test structures

* fix: update nextJS enhanced image to have persistent sizes prop value

* fix: update 'Flyout' component to fix DOM nesting issue

* refactor(tooltip): update primitive trigger props

* chore(card): add TODO and 'use client' directive back to 'CardDemo' component

---------

Co-authored-by: Brian Cooper <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug needs triage
Projects
Core Team Projects
Archived in project
Milestone
No milestone
Development

No branches or pull requests
9 participants
@sirtobey @terrymun @gregegan @codeth @Wymowny @GarrisonD @coding-tomato @MarcelKnobelsdorf @mnicholstamu