javascript - 故事书无法读取未定义的属性(读取 'type' )

Question

我是 React 的新手，我现在正在尝试使用 Storybook。使用 npm run storybook 时遇到以下错误.我已经尝试弄清楚了，但我仍然不确定。
无法读取未定义的属性(读取“类型”)
TypeError:无法读取未定义的属性(读取“类型”)

at isMdx (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:3504:30)
at mdxToJsx (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:3508:8)
at jsxDecorator (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:3545:19)
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:9896:21
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:19890:12
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:19939:14
at wrapper (http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:7412:12)
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:10411:14
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:10425:26
at http://localhost:6006/vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_lib_runtime_RefreshUtils_js-node_mod-3a4695.iframe.bundle.js:9896:21

vendors-node_modules 似乎有问题，但有谁知道如何解决这个问题？

Answer 1

TypeError: Cannot read properties of undefined (reading 'type')当定义 argTypes 时，故事书中会发生异常。在默认导出对象中，而不为每个参数类型定义“类型”。
本质上，故事书将查看每个 prop在您的 argTypes 中定义并尝试使用 type关闭它的属性:

export default {
  title: 'Components/Video',
  component: Video,
  argTypes: {
    title: { type: 'string', defaultValue: 'Why is type undefined?' }
  }
};

解决方法:不要使用argTypes，除非你想定义每个prop类型；因此名称 argTypes .
或者，您可以省略 argTypes并且只有:

export default {
  title: 'Components/Video',
  component: Video
};

然后当你定义模板时:

const Template: ComponentStory<typeof Video> = (args: VideoProps) => <Video {...args} />;

export const Default = Template.bind({});
Default.args = {
  title: 'Video Title'
};

如果你使用 TypeScript，Storybook 不仅有 ComponentStory<typeof Component>它还导出 ComponentMeta<typeof Component>类型。
与上面相同的解决方案，但完全是 TS:

import React from 'react';
import { Video } from './video';
import type { ComponentMeta, ComponentStory } from '@storybook/react';
import type { VideoProps } from './video';

const video: ComponentMeta<typeof Video> = {
  title: 'Components/Video',
  component: Video,
  argTypes: {
    title: { type: 'string', defaultValue: 'Why is type undefined?' }
  }
};

export default video;

const Template: ComponentStory<typeof Video> = (args: VideoProps) => <Video {...args} />;

export const Default = Template.bind({});
Default.args = {
  title: 'Video Title'
};