Storybook 7.0.23 - TypeError：filterProps.indexOf 不是函数

Question

<p>我有一个简单的 React 组件：</p> <pre class="brush:php;toolbar:false;">import React from 'react'; const Button = (props) => { return ( <div>My Button props: {Object.keys(props)}</div> ) } export default Button;</pre> <p>我有一个故事书故事如下：</p> <pre class="brush:php;toolbar:false;">import React from 'react'; import Button from './'; export default { component: <Button />, tags: ['autodocs'], }; export const Default = { args: { primary: true }, };</pre> <p>但是当故事书运行时，我收到以下错误：</p> <pre class="brush:php;toolbar:false;">Uncaught TypeError: filterProps.indexOf is not a function at index.js:576:1 at Array.filter (<anonymous>) 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)</pre> <p>我注意到，当我删除故事书中的 <code>args</code> 时，组件就会呈现。</p> <p>.storybook/main.js：</p>

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]
    });

    返回配置；

  },
}</pre>
<p>.storybook/preview.js：</p>
<pre class="brush:php;toolbar:false;">const 预览 = {
  参数： {
    actions: { argTypesRegex: "^on[A-Z].*"; },
    控制：{
      匹配器：{
        颜色：/（背景|颜色）$/i，
        日期：/日期$/，
      },
    },
  },
};


导出默认预览；</pre>
<p>我不确定这是否是我的项目，但当我使用 Storybook 版本时，我的组件正在工作 <code>"@storybook/react": "6.1.21",</code>< ;/p>
<p>不确定发生了什么！</p>
<p>编辑：</p>
<p>我已经找到了导致错误的文件，它是一个node_modules文件：
node_modules/react-element-to-jsx-string/dist/cjs/index.js
;            

Answer 1

我错过了 package.json 具有以下内容的事实：

"overrides": {
    "react-element-to-jsx-string": "14.0.2"
  },

摆脱它可以让我的故事书重新开始运行。 叹息