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

Question

我对React比较新，现在正在尝试使用Storybook。当我使用npm run storybook时，遇到了以下错误。我已经尝试过解决，但仍然不确定。

无法读取未定义的属性（读取“type”） TypeError：无法读取未定义的属性（读取“type”）

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 存在问题，但有人知道如何修复吗？

- Diego Lima

Answer 1

我在一个MDX故事定义中使用了args和Template时遇到了相同的错误，但根本原因完全不同（我没有使用argTypes，只用了args）。

在我的情况下，这是一个基本的JavaScript错误 - 导致了一个不太明确的错误！

我在return后添加了一个新行，并且没有用( )包装我的返回组件（例如：这个）：

export const Template = ({ ... }) => {
  return <div/>;  // works
};

export const Template = ({ ... }) => {
  return (
    <div/>
  );  // works
};

export const Template = ({ ... }) => {
  return
    <div/>;  // does NOT work
};

与上述相同，渲染故事页面时显示“无法读取未定义的属性（读取'type'）”。

（显然只是用户错误，与Storybook或MDX无关，但在此包括信息作为另一个可能的解决方案，供任何到达这里但上述解决方案不适用的人参考）。

- woja

---

这个答案帮了我很多。我试图将我的故事模板写成一行代码，使用隐式返回，但是没有成功。所以在看了你的代码之后，我添加了一个返回语句，然后它就奏效了。谢谢！ - James F. Thomas

Answer 2

TypeError: Cannot read properties of undefined (reading 'type')异常在storybook中发生，当定义默认导出对象中的argTypes时，未为每个参数类型定义'type'时会出现此问题。基本上，storybook将查看您在argTypes中定义的每个prop，并尝试使用type属性。

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

解决方案：除非您想定义每个道具类型，否则不要使用argTypes；因此名称是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'
};

- hanorine

Answer 3

对我来说，它是一对花括号 :/ 当我导入我的组件时，它看起来像{myComponent} 我移除了花括号，问题就解决了。

- DlnyaMaz