我有一个简单的 React 组件：

import React from 'react'; const Button = (props) => { return ( 
My Button props: {Object.keys(props)}
 ) } export default Button;

我有一个故事书故事如下：

import React from 'react'; import Button from './'; export default { component: , tags: ['autodocs'], }; export const Default = { args: { primary: true }, };

但是当故事书运行时，我收到以下错误：

Uncaught TypeError: filterProps.indexOf is not a function at index.js:576:1 at Array.filter () at formatReactElementNode (index.js:575:1) at formatTreeNode (index.js:735:1) at formatTree (index.js:746:1) at reactElementToJsxString (index.js:786:1) at config.mjs:19:1 at mapSingleChildIntoContext (react.development.js:1149:1) at traverseAllChildrenImpl (react.development.js:1007:1) at traverseAllChildren (react.development.js:1092:1)

我注意到，当我删除故事书中的 args 时，组件就会呈现。

.storybook/main.js：

module.exports = { 故事：[ “../src/**/*.story.@(js|jsx|ts|tsx)”， ], 插件：[ “@storybook/addon-links”， “@storybook/addon-essentials”， “@storybook/addon-interactions”， ], 框架： { 名称：“@storybook/react-webpack5”， 选项： {}， }, 文档：{ 自动文档：“标签”， }, 打字稿：{ 反应文档根：假 }, webpackFinal: (配置) => { 常量 cssLoaders = [{ 加载器：'postcss-loader'， 选项： { 插件：[ require('postcss-assets')({ 缓存: true }), require('autoprefixer')({ 浏览器: ['chrome 44'] }) ] } }, { 加载器：'sass-加载器'， 选项： { includePaths: ['node_modules', 'src/scss'], 安静Deps：正确 } }] config.module.rules.push({ 测试：/\.js?$/, 排除：/(node_modules|覆盖|目标)/, 加载器：'巴别塔加载器'， 选项： { 插件：['@babel/plugin-syntax-dynamic-import'] } }, { 测试：/\.s?css$/, 使用：['样式加载器'，...cssLoaders] }); 返回配置； }, }

.storybook/preview.js：

const 预览 = { 参数： { actions: { argTypesRegex: "^on[A-Z].*"; }, 控制：{ 匹配器：{ 颜色：/（背景|颜色）$/i， 日期：/日期$/， }, }, }, }; 导出默认预览；

我不确定这是否是我的项目，但当我使用 Storybook 版本时，我的组件正在工作 "@storybook/react": "6.1.21",< ;/p>

不确定发生了什么！

编辑：

我已经找到了导致错误的文件，它是一个node_modules文件：node_modules/react-element-to-jsx-string/dist/cjs/index.js