Storybook 7.0.23 - TypeError : filterProps.indexOf n'est pas une fonction

Question

J'ai un composant React simple :

importer React depuis 'react';

const Bouton = (accessoires) =>

  retour (
    <div>Accessoires de mon bouton : {Object.keys(props)}</div>
  )
}

Exporter le bouton par défaut ;

J'ai une histoire de livre de contes comme suit :

importer React depuis 'react';

importer le bouton depuis './' ;

exporter par défaut {
  composant : <Bouton />,
  balises : ['autodocs'],
} ;

export const Par défaut = {
  arguments : {
    primaire : vrai
  },
};</pré>
<p>Mais lorsque le livre de contes s'exécute, j'obtiens l'erreur suivante : </p>
<pre class="brush:php;toolbar:false;">Uncaught TypeError : filterProps.indexOf n'est pas une fonction
    à index.js: 576: 1
    sur Array.filter (<anonyme>)
    au formatReactElementNode (index.js:575:1)
    au formatTreeNode (index.js:735:1)
    au formatTree (index.js:746:1)
    à réagirElementToJsxString (index.js:786:1)
    sur config.mjs : 19 : 1
    sur mapSingleChildIntoContext (react.development.js:1149:1)
    à traversAllChildrenImpl (react.development.js:1007:1)
    à traverseAllChildren (react.development.js:1092:1)

J'ai remarqué que lorsque je supprime le args dans le livre d'histoires, le composant s'affiche.

.storybook/main.js：

module.exports = {
  histoires: [
    "../src/**/*.story.@(js|jsx|ts|tsx)",
  ],
  modules complémentaires : [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  cadre: {
    nom : "@storybook/react-webpack5",
    options : {},
  },
  documents : {
    autodocs : "balise",
  },
  dactylographié : {
    réagirDocgen : faux
  },
  webpackFinal : (config) => {
    const cssLoaders = [{
      chargeur : 'postcss-loader',
      options : {
        plugins : [
          require('postcss-assets')({ cache : true }),
          require('autoprefixer')({ navigateurs : ['chrome 44'] })
        ]
      }
    }, {
      chargeur : 'sass-loader',
      options : {
        includePaths : ['node_modules', 'src/scss'],
        quietDeps : vrai
      }
    }]

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

    retourner la configuration ;

  },
}</pré>
<p>.storybook/preview.js：</p>
<pre class="brush:php;toolbar:false;">const aperçu = {
  paramètres: {
    actions : { argTypesRegex : "^on[A-Z].*" },
    contrôles: {
      correspondants : {
        couleur : /(arrière-plan|couleur)$/i,
        date : /Date$/,
      },
    },
  },
} ;


exporter l'aperçu par défaut ;

lt;/code>< ;/p>

不太确定发生了什么！

编辑：

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

Answer 1

J'ai raté package.json le fait que :

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

M'en débarrasser permet à mon livre de contes de fonctionner à nouveau. soupir