Storybook 7.0.23 – TypeError: filterProps.indexOf ist keine Funktion

Question

Ich habe eine einfache React-Komponente:

import React from 'react';

const Button = (props) =>

  zurückkehren (
    <div>Meine Button-Requisiten: {Object.keys(props)}</div>
  )
}

Schaltfläche „Standard exportieren“;

Ich habe eine Märchengeschichte wie folgt:

import React from 'react';

Import-Button von './';

Standard exportieren {
  Komponente: <Button />,
  Tags: ['autodocs'],
};

export const Standard = {
  Argumente: {
    primär: wahr
  },
};

Aber wenn Storybook ausgeführt wird, erhalte ich die folgende Fehlermeldung:

Nicht erfasster TypeError: filterProps.indexOf ist keine Funktion
    bei index.js:576:1
    bei Array.filter (<anonym>)
    bei formatReactElementNode (index.js:575:1)
    bei formatTreeNode (index.js:735:1)
    bei formatTree (index.js:746:1)
    bei „reactElementToJsxString“ (index.js:786:1)
    unter config.mjs:19:1
    bei mapSingleChildIntoContext (react.development.js:1149:1)
    bei traverseAllChildrenImpl (react.development.js:1007:1)
    bei traverseAllChildren (react.development.js:1092:1)

Mir ist aufgefallen, dass die Komponente gerendert wird, wenn ich die args

.storybook/main.js：

module.exports = {
  Geschichten: [
    "../src/**/*.story.@(js|jsx|ts|tsx)",
  ],
  Addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  Rahmen: {
    Name: "@storybook/react-webpack5",
    Optionen: {},
  },
  Dokumente: {
    Autodocs: "Tag",
  },
  Typoskript: {
    ReactDocgen: falsch
  },
  webpackFinal: (config) => {
    const cssLoaders = [{
      Lader: 'postcss-loader',
      Optionen: {
        Plugins: [
          require('postcss-assets')({ Cache: true }),
          require('autoprefixer')({ browsers: ['chrome 44'] })
        ]
      }
    }, {
      Lader: 'sass-loader',
      Optionen: {
        includePaths: ['node_modules', 'src/scss'],
        quietDeps: stimmt
      }
    }]

    config.module.rules.push({
      test: /.js?$/,
      ausschließen: /(node_modules|coverage|target)/,
      Lader: 'babel-loader',
      Optionen: {
        Plugins: ['@babel/plugin-syntax-dynamic-import']
      }
    }, {
      test: /.s?css$/,
      verwenden: ['style-loader', ...cssLoaders]
    });

    Konfiguration zurückgeben;

  },
}

.storybook/preview.js：

const Vorschau = {
  Parameter: {
    Aktionen: { argTypesRegex: "^on[A-Z].*" },
    Steuerelemente: {
      Matcher: {
        Farbe: /(Hintergrund|Farbe)$/i,
        Datum: /Datum$/,
      },
    },
  },
};


Standardvorschau exportieren;

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

不太确定发生了什么！

编辑：

node_modules/react-element-to-jsx-string/dist/cjs/index.js

Answer 1

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

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

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