Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Controls beta.38 causes crash when switching to controls tab

See original GitHub issue

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

Issue Analytics

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

github_iconTop GitHub Comments

6reactions
shilmancommented, Aug 12, 2020

@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.

3reactions
milenaNeumanncommented, Aug 7, 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Official Bug/Exploit Reporting Thread - Beta Weekend 2 - Reddit
I was only able to walk forward and backwards. Once I got killed in the game, I was able to fully function with...
Read more >
Access 2010 crashes attempting to alter Tab controls from ...
In any event, I can add fields, change tab order, etc., on any page of the control just fine, but I cannot add...
Read more >
167351 - [Beta]Youtube video controls are lost after returning ...
1. Launch Chrome Beta 2. Navigate to youtube.com 3. Tap on any video to play 4. Tap on the button on icon for...
Read more >
Acquiring crash reports and diagnostic logs - Apple Developer
Select the desired log. Tap the Share icon, and select Mail to send the crash report as a mail attachment.
Read more >
Experiencing crashes/issues? Read here! :: Fable Anniversary ...
- Go to your Steam library, right click Fable Anniversary and select 'Properties'. Select the 'Local Files' tab and click the 'Verify Integrity...
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
Previous page

Getting "Cannot use import statement outside a module" with MDX files running with Jest

Next page

Why is react stated as peerDependency when using @storybook/vue?