Storybook 7.0.23 - TypeError：filterProps.indexOf 不是函数
<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>
<pre class="brush:php;toolbar:false;">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;
},
}</pre>
<p>.storybook/preview.js：</p>
<pre class="brush:php;toolbar:false;">const preview = {
parameters: {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
},
};
export default preview;</pre>
<p>我不确定这是否是我的项目，但当我使用 Storybook 版本时，我的组件正在工作 <code>"@storybook/react": "6.1.21",</code></p>
<p>不太确定发生了什么！</p>
<p>编辑：</p>
<p>我已经找到了导致错误的文件，它是一个node_modules文件：
<code>node_modules/react-element-to-jsx-string/dist/cjs/index.js</code></p>
1
839
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
我错过了
package.json具有以下内容的事实："overrides": { "react-element-to-jsx-string": "14.0.2" },摆脱它可以让我的故事书重新开始运行。 叹息