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

Created on 1 Jul 2020  Β·  26Comments  Β·  Source: storybookjs/storybook

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
controls angular has workaround inactive question / support

Most helpful comment

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

All 26 comments

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:

  • 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! πŸ™

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

Was this page helpful?
0 / 5 - 0 ratings