storybook shows 'This story is not configured to handle controls. ' error

user_16446564 0
Viewed 890

I installed storybook by using npx tsdx create
and selected react-with-storybook to make style component library.
while developing, I got 'This story is not configured to handle controls. ' error.
tsdx automatically installs all the essential addons include storybook controls.
So there's no reason to get this error.

After searching about this, I found this post.
Long story short, This error is about storybook dependency version.
They said, If I downgrade version under 6.0.9, it would works find.
So I tried, and this time I couldn't even start the project. (build failed or something).

This is my devDependencies from package.json

 "devDependencies": {
    "@babel/core": "^7.17.2",
    "@size-limit/preset-small-lib": "^7.0.8",
    "@storybook/addon-essentials": "^6.4.13",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-links": "^6.4.13",
    "@storybook/addons": "^6.4.13",
    "@storybook/react": "^6.4.13",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "babel-loader": "^8.2.3",
    "husky": "^7.0.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-is": "^17.0.2",
    "size-limit": "^7.0.8",
    "tsdx": "^0.14.1",
    "tslib": "^2.3.1",
    "typescript": "^4.5.5"
  }

and What I changed were

"devDependencies": {
    "@babel/core": "^7.17.2",
    "@size-limit/preset-small-lib": "^7.0.8",
    "@storybook/addon-essentials": "6.0.9", <<=
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-links": "6.0.9", <<=
    "@storybook/addons": "6.0.9", <<=
    "@storybook/react": "6.0.9", <<=
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "babel-loader": "^8.2.3",
    "husky": "^7.0.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-is": "^17.0.2",
    "size-limit": "^7.0.8",
    "tsdx": "^0.14.1",
    "tslib": "^2.3.1",
    "typescript": "^4.5.5"
  }

If you know any workaround, please share! Thanks!

storybook
1 Answers

In my case this error was caused from another story, which had a control that had incorrect options, here is the web component

export default {
  title: 'Buttons/HTMLButton',
  argTypes: {
    sizeClass: {
      control: { type: 'select' },
      options: { '': '', Huge: 'huge-size' }
    },
  },
};

As soon as I fixed the options to { 'Default': '', Huge: 'huge-size' } it fixed this issue.

Even though this story was completely different, but it was causing controls to disappear in a different story, at the same time the controls are available and working in the Docs tab, but in the main Canvas you will see no controls and with error This story is not configured to handle controls..

To debug this issue, I had to move all stories to a different location, bring back stories one-by-one to see which is causing the problem.

Not too often but sometimes I have faced this funny behaviour of storybook, where an issue will lead to a completely different and misleading error.

user_12445970
Related