Storybook 7.0.23 - TypeError: filterProps.indexOf is not a function

Question

I have a simple React component:

import React from 'react';

const Button = (props) => {

  return (
    <div>My Button props: {Object.keys(props)}</div>
  )
}

export default Button;

I have a storybook story as follows:

import React from 'react';

import Button from './';

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

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

But when storybook runs, I get the following error:

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)

I noticed that when I remove the args in the storybook, the component renders.

.storybook/main.js：

module.exports = {
  stories: [
    "../src/**/*.story.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  typescript: {
    reactDocgen: false
  },
  webpackFinal: (config) => {
    const cssLoaders = [{
      loader: 'postcss-loader',
      options: {
        plugins: [
          require('postcss-assets')({ cache: true }),
          require('autoprefixer')({ browsers: ['chrome 44'] })
        ]
      }
    }, {
      loader: 'sass-loader',
      options: {
        includePaths: ['node_modules', 'src/scss'],
        quietDeps: true
      }
    }]

    config.module.rules.push({
      test: /\.js?$/,
      exclude: /(node_modules|coverage|target)/,
      loader: 'babel-loader',
      options: {
        plugins: ['@babel/plugin-syntax-dynamic-import']
      }
    }, {
      test: /\.s?css$/,
      use: ['style-loader', ...cssLoaders]
    });

    return config;

  },
}

.storybook/preview.js：

const preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};


export default preview;

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

不太确定发生了什么！

编辑：

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

Answer 1

I missed the fact that package.json has the following content:

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

Getting rid of it can get my storybook running again. sigh