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:
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
Can you try clearing out node_modules and reinstalling? And if that doesn't work, clearing lockfiles and reinstalling? I'm not able to repro that in our Angular example. And if that doesn't fix things, do you have a public repro?
@shilman already tried and no, itβs a work project.
Hmm can you try removing addon-console?
@shilman Sure. Iβll try it tomorrow.
@shilman Ripping out addon-console didn't change anything. I pulled out all the control code from the stories, but the addon itself is still set up.
I can now open the tab, see the docs, and it's fine. I'll add controls code back in slowly and try to see if I can figure out what broke it.
@shilman As soon as I change the story declaration from
const foo = () => {}
to
const foo = args => {}
I get the React/Hooks crash.
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
@shilman After a bit of testing, I know itβs the 38+ angular package, not the controls package. After the upgrade, Angular appears to be missing dev kit/core, but installing it just gets you to the normal screens of Storybook. The controls panel will still crash.
cc @kroeder @matheo @gaetanmaisse can anybody give a hand here?
@shilman Update: Still having this issue under beta-44.
Here's some sample code from a component that dies when I open the controls panel.
// button.ts
import { Component, Input, OnInit, Output, EventEmitter } from "@angular/core";
type status = null | "processing" | "error";
@Component({
selector: "icon-button",
template: `<button
(click)="handleRequest($event)"
[disabled]="status === 'PENDING'"
class="flex items-center p-1 leading-none text-secondary rounded"
[class.flex-row-reverse]="reversed"
[class.border]="bordered"
[class.px-2]="!srOnly"
[ngClass]="class"
>
<ng-container [ngSwitch]="status">
<ng-template [ngSwitchCase]="'processing'">
<span class="spin-donut transform scale-75 w-5 h-5"></span>
</ng-template>
<ng-template [ngSwitchCase]="'error'">
<svg
class="w-5 h-5 text-danger"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</ng-template>
<ng-template ngSwitchDefault>
<ng-content></ng-content>
</ng-template>
</ng-container>
<span [class.sr-only]="srOnly" class="mx-1">
{{ label }}
</span>
</button> `,
})
export class IconButtonComponent implements OnInit {
@Input() class: string;
@Input() status: status;
@Input() label: string;
@Input() srOnly = false;
@Input() reversed = false;
@Input() bordered = false;
@Output() onClick = new EventEmitter();
ngOnInit() {}
handleRequest(event: MouseEvent) {
if (this.status) {
return;
}
this.onClick.emit(event);
}
}
// button.stories.ts
import { linkTo } from "@storybook/addon-links";
import { IconButtonComponent } from "./icon-button.component";
import { moduleMetadata } from "@storybook/angular";
import { action } from "@storybook/addon-actions";
export default {
title: "Atoms/Icon Button",
componentSubtitle: "Display an icon with or without a label inside a button.",
excludeStories: /.*Data$/,
decorators: [moduleMetadata({ declarations: [IconButtonComponent] })],
component: IconButtonComponent,
};
const templateData = {
template: `
<icon-button
(click)="onClick()"
(onClick)="onClick($event)"
[class]="class"
[label]="label"
[srOnly]="srOnly"
[reversed]="reversed"
[status]="status"
bordered="true"
>
<svg
class="text-success w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd">
</path>
</svg>
</icon-button>
`,
};
export const actionsData = {
onClick: action("onClick"),
};
export const buttonData = {
label: "γγΌγΏεεΎ",
status: undefined,
onClick: actionsData.onClick,
class:
"focus:outline-none focus:shadow-outline-gray text-secondary border-secondary",
};
export const WithLabel = args => ({
...templateData,
props: {
...args,
onClick: linkTo("Atoms/Icon Button", "Loading With Label"),
},
});
WithLabel.args = buttonData;
export const WithLabelReversed = args => ({
...templateData,
props: {
...args,
onClick: linkTo("Atoms/Icon Button", "Loading With Label"),
},
});
WithLabelReversed.args = { ...buttonData, reversed: true };
export const LoadingWithLabel = args => ({
props: {
...args,
},
...templateData,
});
LoadingWithLabel.args = { ...buttonData, status: "processing" };
export const ErrorWithLabel = args => ({
props: { ...args },
...templateData,
});
ErrorWithLabel.args = { ...buttonData, status: "error" };
export const WithoutLabel = args => ({
props: { ...args },
...templateData,
});
WithoutLabel.args = { ...buttonData, srOnly: true, label: "OK" };
Can't share a repo, but maybe this will help.
@brandonpittman is there any chance you can create a minimal repro with just those those two files and whatever basic Storybook config you need to show the problem? would help a ton, and i should be able to get you a fix within a day or so.
@shilman I will try. πͺπ»
@brandonpittman if it helps, here's a template for codesandbox: https://gist.github.com/yannbf/d7a32cfe697e71489db00bfd50e7ab5c
alternatively, a standalone github repo would also be great
@shilman Not completely sure why, but the latest release candidate seems to have resolved this issue.
@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!
@shilman I take it back, it's still broken. Any time I provide an args
param in a story, the Hooks crash happens.
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.
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.
Ok thanks so much for the repro. It's a very strange bug.
Specifically:
Will dig in more over the weekend. Thanks! π
@shilman Were you able to find the cause?
+1
@brandonpittman @milenaNeumann OK figured it out:
$ npm ls @storybook/components
[email protected] /Users/shilman/projects/testing/cautious-bassoon
βββ¬ @sambego/[email protected]
β βββ @storybook/[email protected]
β βββ¬ @storybook/[email protected]
β βββ¬ @storybook/[email protected]
β βββ¬ @storybook/[email protected]
β βββ @storybook/[email protected] deduped
βββ¬ @storybook/[email protected]
β βββ @storybook/[email protected]
βββ¬ @storybook/[email protected]
β βββ @storybook/[email protected]
βββ¬ @storybook/[email protected]
β βββ @storybook/[email protected]
β βββ¬ @storybook/[email protected]
β βββ @storybook/[email protected] deduped
β βββ¬ @storybook/[email protected]
β βββ @storybook/[email protected] deduped
βββ¬ UNMET PEER DEPENDENCY @storybook/[email protected]
βββ¬ @storybook/[email protected]
βββ @storybook/[email protected]
βββ¬ @storybook/[email protected]
βββ @storybook/[email protected] 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/[email protected]
, which pulls in 5.3
components, it works, after clearning node_modules
and reinstalling.
@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.
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!
Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!
This was resolved a while back so I'm closing this.
Most helpful comment
@brandonpittman @milenaNeumann OK figured it out:
The issue is that the controls panel needs
6.0
components, but storybook was loading5.3
components, which doesn't contain the controls. Once I removed@sambego/[email protected]
, which pulls in5.3
components, it works, after clearningnode_modules
and reinstalling.