故事书显示 'This story is not configured to handle controls. ' 错误

Question

我使用 npx tsdx create 安装了 storybook
并选择react-with-storybook制作样式组件库。
在开发时，我得到“这个故事未配置为处理控件”。 ' 错误。
tsdx 自动安装所有必要的插件，包括故事书控件。
所以没有理由得到这个错误。

搜索后，我找到了this发布。
长话短说，这个错误是关于故事书依赖版本的。
他们说，如果我将版本降到 6.0.9 以下，它会找到。
所以我尝试了，这次我什至无法启动项目。 (构建失败或其他)。

这是来自 package.json 的我的 devDependencies

 "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"
  }

我改变的是

"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"
  }

如果您知道任何解决方法，请分享!谢谢!

Answer 1

在我的例子中，这个错误是由另一个故事引起的，它有一个 control 有不正确的选项，这里是 web 组件

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

一旦我将 options 修复为 { 'Default': '', Huge: 'huge-size' } 它就解决了这个问题。

尽管这个故事完全不同，但它导致控件在另一个故事中消失，同时控件可用并在 Docs 选项卡中工作，但在主 Canvas 中您将看不到任何控件，并且出现错误 This story is not configured to handle controls.。

为了调试这个问题，我不得不将所有故事移动到不同的位置，一个一个地取回故事以查看是哪个故事导致了问题。

不经常，但有时我会遇到故事书的这种有趣行为，其中一个问题会导致完全不同且具有误导性的错误。