Storybook 7.0.23报错：TypeError: filterProps.indexOf is not a function

问题根源 #

你的Story配置里存在一个关键错误：把component字段设置成了JSX元素<Button />，而非组件本身的引用Button。当启用autodocs并传入args时，Storybook依赖的react-element-to-jsx-string工具在处理这个JSX实例时，会将内部的filterProps识别为非数组类型（实际是对象），导致调用indexOf方法触发类型错误。旧版Storybook（6.1.21）对这种写法有兼容逻辑，但升级到基于webpack5的新版本后不再支持。

修复步骤 #

修改Story文件的默认配置，将component的值替换为组件本身：

import React from 'react';
import Button from './';

export default {
  // 替换 <Button /> 为 Button
  component: Button,
  tags: ['autodocs'],
};

export const Default = {
  args: {
    primary: true
  },
};

验证结果 #

重启Storybook后，组件会正常渲染，同时args中的primary属性也会正确传递给组件，错误消失。

内容的提问来源于stack exchange，提问作者Tom