故事书无法读取未定义的属性（读取“类型”）答案

【问题标题】：Storybook Cannot read properties of undefined (reading 'type')故事书无法读取未定义的属性（读取“类型”）
【发布时间】：2022-07-22 04:07:59
【问题描述】：

我是 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 似乎有问题，但有人知道如何解决这个问题吗？

【问题讨论】：

标签： javascript reactjs storybook

【解决方案1】：

如果在默认导出对象中定义 argTypes 而没有为每个参数类型定义“类型”，故事书中会发生 TypeError: Cannot read properties of undefined (reading 'type') 异常。

从本质上讲，故事书将查看您在 argTypes 中定义的每个 prop，并尝试使用 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'
};

【讨论】：