storybook: Controls beta.38 causes crash when switching to controls tab

Describe the bug Controls that worked on beta.37 cause a React hooks error when trying to open the controls tab under beta.38.

To Reproduce Steps to reproduce the behavior:

  1. Upgrade to beta.38
  2. View a control could only be an @storybook/angular issue

Expected behavior Control should display normally.

Screenshots If applicable, add screenshots to help explain your problem.

Code snippets

react.development.js:1431 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1431)
    at useRef (react.development.js:1471)
    at TextareaAutosize (react-textarea-autosize.browser.esm.js:174)
    at renderWithHooks (vendors~main.089898c5f21e0370f965.bundle.js:37309)
    at updateForwardRef (vendors~main.089898c5f21e0370f965.bundle.js:39322)
    at beginWork (vendors~main.089898c5f21e0370f965.bundle.js:41151)
    at HTMLUnknownElement.callCallback (vendors~main.089898c5f21e0370f965.bundle.js:22694)
    at Object.invokeGuardedCallbackDev (vendors~main.089898c5f21e0370f965.bundle.js:22743)
    at invokeGuardedCallback (vendors~main.089898c5f21e0370f965.bundle.js:22798)
    at beginWork$1 (vendors~main.089898c5f21e0370f965.bundle.js:45709)
resolveDispatcher @ react.development.js:1431
useRef @ react.development.js:1471
TextareaAutosize @ react-textarea-autosize.browser.esm.js:174
renderWithHooks @ vendors~main.089898c5f21e0370f965.bundle.js:37309
updateForwardRef @ vendors~main.089898c5f21e0370f965.bundle.js:39322
beginWork @ vendors~main.089898c5f21e0370f965.bundle.js:41151
callCallback @ vendors~main.089898c5f21e0370f965.bundle.js:22694
invokeGuardedCallbackDev @ vendors~main.089898c5f21e0370f965.bundle.js:22743
invokeGuardedCallback @ vendors~main.089898c5f21e0370f965.bundle.js:22798
beginWork$1 @ vendors~main.089898c5f21e0370f965.bundle.js:45709
performUnitOfWork @ vendors~main.089898c5f21e0370f965.bundle.js:44660
workLoopSync @ vendors~main.089898c5f21e0370f965.bundle.js:44636
performSyncWorkOnRoot @ vendors~main.089898c5f21e0370f965.bundle.js:44262
(anonymous) @ vendors~main.089898c5f21e0370f965.bundle.js:33595
unstable_runWithPriority @ vendors~main.089898c5f21e0370f965.bundle.js:48727
runWithPriority$1 @ vendors~main.089898c5f21e0370f965.bundle.js:33545
flushSyncCallbackQueueImpl @ vendors~main.089898c5f21e0370f965.bundle.js:33590
flushSyncCallbackQueue @ vendors~main.089898c5f21e0370f965.bundle.js:33578
discreteUpdates$1 @ vendors~main.089898c5f21e0370f965.bundle.js:44399
discreteUpdates @ vendors~main.089898c5f21e0370f965.bundle.js:23312
dispatchDiscreteEvent @ vendors~main.089898c5f21e0370f965.bundle.js:26674
react_devtools_backend.js:6 The above error occurred in the <ForwardRef(TextareaAutosize)> component:
    in ForwardRef(TextareaAutosize) (created by ForwardRef)
    in ForwardRef
    in Textarea (created by TextControl)
    in label
    in Styled(label) (created by TextControl)
    in TextControl (created by ArgControl)
    in ArgControl (created by ArgRow)
    in td (created by ArgRow)
    in tr (created by ArgRow)
    in ArgRow (created by ArgsTable)
    in SectionRow (created by ArgsTable)
    in tbody (created by ArgsTable)
    in table
    in Styled(table) (created by ArgsTable)
    in div
    in Styled(div) (created by ArgsTable)
    in ArgsTable (created by ControlsPanel)
    in ControlsPanel
    in div (created by AddonPanel)
    in AddonPanel
    in div
    in Styled(div)
    in div
    in Styled(div)
    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Panel)
    in Panel (created by Layout)
    in div
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div
    in Styled(div) (created by Main)
    in div
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout
    in WithTheme(Layout)
    in Unknown
    in div
    in Styled(div)
    in Unknown
    in SizeMeReferenceWrapper
    in SizeMeRenderer(Component)
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

React will try to recreate this component tree from scratch using the error boundary you provided, LocationProvider.
r @ react_devtools_backend.js:6
logCapturedError @ vendors~main.089898c5f21e0370f965.bundle.js:42033
logError @ vendors~main.089898c5f21e0370f965.bundle.js:42070
callback @ vendors~main.089898c5f21e0370f965.bundle.js:43250
callCallback @ vendors~main.089898c5f21e0370f965.bundle.js:34996
commitUpdateQueue @ vendors~main.089898c5f21e0370f965.bundle.js:35017
commitLifeCycles @ vendors~main.089898c5f21e0370f965.bundle.js:42364
commitLayoutEffects @ vendors~main.089898c5f21e0370f965.bundle.js:45309
callCallback @ vendors~main.089898c5f21e0370f965.bundle.js:22694
invokeGuardedCallbackDev @ vendors~main.089898c5f21e0370f965.bundle.js:22743
invokeGuardedCallback @ vendors~main.089898c5f21e0370f965.bundle.js:22798
commitRootImpl @ vendors~main.089898c5f21e0370f965.bundle.js:45047
unstable_runWithPriority @ vendors~main.089898c5f21e0370f965.bundle.js:48727
runWithPriority$1 @ vendors~main.089898c5f21e0370f965.bundle.js:33545
commitRoot @ vendors~main.089898c5f21e0370f965.bundle.js:44887
finishSyncRender @ vendors~main.089898c5f21e0370f965.bundle.js:44313
performSyncWorkOnRoot @ vendors~main.089898c5f21e0370f965.bundle.js:44299
(anonymous) @ vendors~main.089898c5f21e0370f965.bundle.js:33595
unstable_runWithPriority @ vendors~main.089898c5f21e0370f965.bundle.js:48727
runWithPriority$1 @ vendors~main.089898c5f21e0370f965.bundle.js:33545
flushSyncCallbackQueueImpl @ vendors~main.089898c5f21e0370f965.bundle.js:33590
flushSyncCallbackQueue @ vendors~main.089898c5f21e0370f965.bundle.js:33578
discreteUpdates$1 @ vendors~main.089898c5f21e0370f965.bundle.js:44399
discreteUpdates @ vendors~main.089898c5f21e0370f965.bundle.js:23312
dispatchDiscreteEvent @ vendors~main.089898c5f21e0370f965.bundle.js:26674
index.js:158 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1431)
    at useRef (react.development.js:1471)
    at TextareaAutosize (react-textarea-autosize.browser.esm.js:174)
    at renderWithHooks (vendors~main.089898c5f21e0370f965.bundle.js:37309)
    at updateForwardRef (vendors~main.089898c5f21e0370f965.bundle.js:39322)
    at beginWork (vendors~main.089898c5f21e0370f965.bundle.js:41151)
    at HTMLUnknownElement.callCallback (vendors~main.089898c5f21e0370f965.bundle.js:22694)
    at Object.invokeGuardedCallbackDev (vendors~main.089898c5f21e0370f965.bundle.js:22743)
    at invokeGuardedCallback (vendors~main.089898c5f21e0370f965.bundle.js:22798)
    at beginWork$1 (vendors~main.089898c5f21e0370f965.bundle.js:45709)
resolveDispatcher @ react.development.js:1431
useRef @ react.development.js:1471
TextareaAutosize @ react-textarea-autosize.browser.esm.js:174
renderWithHooks @ vendors~main.089898c5f21e0370f965.bundle.js:37309
updateForwardRef @ vendors~main.089898c5f21e0370f965.bundle.js:39322
beginWork @ vendors~main.089898c5f21e0370f965.bundle.js:41151
callCallback @ vendors~main.089898c5f21e0370f965.bundle.js:22694
invokeGuardedCallbackDev @ vendors~main.089898c5f21e0370f965.bundle.js:22743
invokeGuardedCallback @ vendors~main.089898c5f21e0370f965.bundle.js:22798
beginWork$1 @ vendors~main.089898c5f21e0370f965.bundle.js:45709
performUnitOfWork @ vendors~main.089898c5f21e0370f965.bundle.js:44660
workLoopSync @ vendors~main.089898c5f21e0370f965.bundle.js:44636
performSyncWorkOnRoot @ vendors~main.089898c5f21e0370f965.bundle.js:44262
(anonymous) @ vendors~main.089898c5f21e0370f965.bundle.js:33595
unstable_runWithPriority @ vendors~main.089898c5f21e0370f965.bundle.js:48727
runWithPriority$1 @ vendors~main.089898c5f21e0370f965.bundle.js:33545
flushSyncCallbackQueueImpl @ vendors~main.089898c5f21e0370f965.bundle.js:33590
flushSyncCallbackQueue @ vendors~main.089898c5f21e0370f965.bundle.js:33578
discreteUpdates$1 @ vendors~main.089898c5f21e0370f965.bundle.js:44399
discreteUpdates @ vendors~main.089898c5f21e0370f965.bundle.js:23312
dispatchDiscreteEvent @ vendors~main.089898c5f21e0370f965.bundle.js:26674
react_devtools_backend.js:6 The above error occurred in the <LocationProvider> component:
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
r @ react_devtools_backend.js:6
logCapturedError @ vendors~main.089898c5f21e0370f965.bundle.js:42033
logError @ vendors~main.089898c5f21e0370f965.bundle.js:42070
update.callback @ vendors~main.089898c5f21e0370f965.bundle.js:43214
callCallback @ vendors~main.089898c5f21e0370f965.bundle.js:34996
commitUpdateQueue @ vendors~main.089898c5f21e0370f965.bundle.js:35017
commitLifeCycles @ vendors~main.089898c5f21e0370f965.bundle.js:42389
commitLayoutEffects @ vendors~main.089898c5f21e0370f965.bundle.js:45309
callCallback @ vendors~main.089898c5f21e0370f965.bundle.js:22694
invokeGuardedCallbackDev @ vendors~main.089898c5f21e0370f965.bundle.js:22743
invokeGuardedCallback @ vendors~main.089898c5f21e0370f965.bundle.js:22798
commitRootImpl @ vendors~main.089898c5f21e0370f965.bundle.js:45047
unstable_runWithPriority @ vendors~main.089898c5f21e0370f965.bundle.js:48727
runWithPriority$1 @ vendors~main.089898c5f21e0370f965.bundle.js:33545
commitRoot @ vendors~main.089898c5f21e0370f965.bundle.js:44887
finishSyncRender @ vendors~main.089898c5f21e0370f965.bundle.js:44313
performSyncWorkOnRoot @ vendors~main.089898c5f21e0370f965.bundle.js:44299
(anonymous) @ vendors~main.089898c5f21e0370f965.bundle.js:33595
unstable_runWithPriority @ vendors~main.089898c5f21e0370f965.bundle.js:48727
runWithPriority$1 @ vendors~main.089898c5f21e0370f965.bundle.js:33545
flushSyncCallbackQueueImpl @ vendors~main.089898c5f21e0370f965.bundle.js:33590
flushSyncCallbackQueue @ vendors~main.089898c5f21e0370f965.bundle.js:33578
discreteUpdates$1 @ vendors~main.089898c5f21e0370f965.bundle.js:44399
discreteUpdates @ vendors~main.089898c5f21e0370f965.bundle.js:23312
dispatchDiscreteEvent @ vendors~main.089898c5f21e0370f965.bundle.js:26674
vendors~main.089898c5f21e0370f965.bundle.js:33608 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1431)
    at useRef (react.development.js:1471)
    at TextareaAutosize (react-textarea-autosize.browser.esm.js:174)
    at renderWithHooks (vendors~main.089898c5f21e0370f965.bundle.js:37309)
    at updateForwardRef (vendors~main.089898c5f21e0370f965.bundle.js:39322)
    at beginWork (vendors~main.089898c5f21e0370f965.bundle.js:41151)
    at HTMLUnknownElement.callCallback (vendors~main.089898c5f21e0370f965.bundle.js:22694)
    at Object.invokeGuardedCallbackDev (vendors~main.089898c5f21e0370f965.bundle.js:22743)
    at invokeGuardedCallback (vendors~main.089898c5f21e0370f965.bundle.js:22798)
    at beginWork$1 (vendors~main.089898c5f21e0370f965.bundle.js:45709)

System:

System:
    OS: macOS 10.15.5
    CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
  Binaries:
    Node: 14.3.0 - /var/folders/q6/mtqdcmhs7nl4zxxpdf0tr_xm0000gn/T/fnm-shell-7975229/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /var/folders/q6/mtqdcmhs7nl4zxxpdf0tr_xm0000gn/T/fnm-shell-7975229/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Safari: 13.1.1
  npmPackages:
    @storybook/addon-a11y: ^6.0.0-beta.38 => 6.0.0-beta.38
    @storybook/addon-actions: ^6.0.0-beta.38 => 6.0.0-beta.38
    @storybook/addon-console: ^1.2.1 => 1.2.1
    @storybook/addon-controls: ^6.0.0-beta.38 => 6.0.0-beta.38
    @storybook/addon-docs: ^6.0.0-beta.38 => 6.0.0-beta.38
    @storybook/addon-links: ^6.0.0-beta.38 => 6.0.0-beta.38
    @storybook/angular: ^6.0.0-beta.38 => 6.0.0-beta.38

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 2
  • Comments: 26 (10 by maintainers)

Most upvoted comments

@brandonpittman @milenaNeumann OK figured it out:

 $ npm ls @storybook/components
cautious-bassoon@0.0.1 /Users/shilman/projects/testing/cautious-bassoon
├─┬ @sambego/storybook-state@2.0.1
│ ├── @storybook/components@5.3.19
│ └─┬ @storybook/react@5.3.19
│   └─┬ @storybook/core@5.3.19
│     └─┬ @storybook/ui@5.3.19
│       └── @storybook/components@5.3.19  deduped
├─┬ @storybook/addon-actions@6.0.0-rc.29
│ └── @storybook/components@6.0.0-rc.29
├─┬ @storybook/addon-controls@6.0.0-rc.29
│ └── @storybook/components@6.0.0-rc.29
├─┬ @storybook/addon-docs@6.0.0-rc.29
│ ├── @storybook/components@6.0.0-rc.29
│ └─┬ @storybook/core@6.0.0-rc.29
│   ├── @storybook/components@6.0.0-rc.29  deduped
│   └─┬ @storybook/ui@6.0.0-rc.29
│     └── @storybook/components@6.0.0-rc.29  deduped
└─┬ UNMET PEER DEPENDENCY @storybook/react@6.0.0-rc.29
  └─┬ @storybook/core@6.0.0-rc.29
    ├── @storybook/components@6.0.0-rc.29
    └─┬ @storybook/ui@6.0.0-rc.29
      └── @storybook/components@6.0.0-rc.29  deduped

The issue is that the controls panel needs 6.0 components, but storybook was loading 5.3 components, which doesn’t contain the controls. Once I removed @sambego/storybook-state@2.0.1, which pulls in 5.3 components, it works, after clearning node_modules and reinstalling.

+6
shilman on Aug 12, 2020

Hi there, I have created a repro of the bug: https://github.com/milenaNeumann/cautious-bassoon

If you go on the canvas of “slider2” and click on the control tab, the error pops up and the page becomes blank.

+3
milenaNeumann on Aug 7, 2020

Ok thanks so much for the repro. It’s a very strange bug.

Specifically:

  • It happens when you install with npm, but NOT when you install with yarn
  • It happens in the addons panel, which is NOT where I’d expect this kind of error to occur.

Will dig in more over the weekend. Thanks! 🙏

+2
shilman on Aug 7, 2020

yay, I can confirm that it works for us now; we also updated to v6.0.7 now. Thank you for finding the cause of the problem, and also for making Storybook 6 possible!

+1
milenaNeumann on Aug 14, 2020

@shilman Awesome! Thank you so much. Been stuck on the old beta forever now. Japan is on holiday till Monday but I’ll upgrade our stack ASAP and get back to it.

+1
brandonpittman on Aug 12, 2020

Hi there, I have created a repro of the bug: https://github.com/milenaNeumann/cautious-bassoon

If you go on the canvas of “slider2” and click on the control tab, the error pops up and the page becomes blank.

Oh thank god it wasn’t just me.

+1
brandonpittman on Aug 7, 2020

@brandonpittman hallelujah! … but a little disappointing that this issue and the CJK one were both resolved “by accident.” feels pretty haphazard, but at this point i’ll take a win on this one any way i can get it. LMK if it comes up again!

+1
shilman on Jul 13, 2020

If you can’t share your storybook is there any chance you can create a minimal repro? @yannbf has set up a codesandbox template if that makes things easier: https://gist.github.com/yannbf/d7a32cfe697e71489db00bfd50e7ab5c

+1
shilman on Jul 2, 2020

@shilman As soon as I change the story declaration from

const foo = () => {}

to

const foo = args => {}

I get the React/Hooks crash.

+1
brandonpittman on Jul 2, 2020
Read more comments on GitHub
← storybook: Component-level css not loading into stories
storybook: Controls: boolean control throws a red warning →