Buku cerita 7.0.23 - TypeError: filterProps.indexOf bukan fungsi
<p>Saya mempunyai komponen React yang mudah: </p>
<pre class="brush:php;toolbar:false;">import React daripada 'react';
Butang const = (props) =>
kembali (
<div>Prop Butang Saya: {Object.keys(props)}</div>
)
}
eksport Butang lalai;</pre>
<p>Saya mempunyai cerita buku cerita seperti berikut:</p>
<pre class="brush:php;toolbar:false;">import React daripada 'react';
import Butang daripada './';
eksport lalai {
komponen: <Butang />,
tag: ['autodocs'],
};
export const Lalai = {
args: {
primer: benar
},
};</pre>
<p>Tetapi apabila buku cerita dijalankan, saya mendapat ralat berikut: </p>
<pre class="brush:php;toolbar:false;">Uncaught TypeError: filterProps.indexOf bukan fungsi
di index.js:576:1
di Array.filter (<tanpa nama>)
di formatReactElementNode (index.js:575:1)
di formatTreeNode (index.js:735:1)
di formatTree (index.js:746:1)
di reactElementToJsxString (index.js:786:1)
di config.mjs:19:1
di mapSingleChildIntoContext (react.development.js:1149:1)
di traverseAllChildrenImpl (react.development.js:1007:1)
di traverseAllChildren (react.development.js:1092:1)</pre>
<p>Saya perasan bahawa apabila saya mengalih keluar <kod>args</kod></p>
<p>.buku cerita/main.js:</p>
<pre class="brush:php;toolbar:false;">module.exports = {
cerita: [
"../src/**/*.story.@(js|jsx|ts|tsx)",
],
tambahan: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],
rangka kerja: {
nama: "@storybook/react-webpack5",
pilihan: {},
},
dokumen: {
autodocs: "tag",
},
skrip taip: {
reactDocgen: palsu
},
webpackFinal: (config) => {
const cssLoaders = [{
pemuat: 'postcss-loader',
pilihan: {
pemalam: [
memerlukan('postcss-assets')({ cache: true }),
memerlukan('autoprefixer')({ pelayar: ['chrome 44'] })
]
}
}, {
pemuat: 'sass-loader',
pilihan: {
includePaths: ['node_modules', 'src/scss'],
quietDeps: benar
}
}]
config.module.rules.push({
ujian: /.js?$/,
kecualikan: /(node_modules|liputan|sasaran)/,
pemuat: 'pemuat babel',
pilihan: {
pemalam: ['@babel/plugin-syntax-dynamic-import']
}
}, {
ujian: /.s?css$/,
gunakan: ['style-loader', ...cssLoader]
});
kembalikan konfigurasi;
},
}</pre>
<p>.buku cerita/preview.js:</p>
<pre class="brush:php;toolbar:false;">const preview = {
parameter: {
tindakan: { argTypesRegex: "^on[A-Z].*" },
kawalan: {
padanan: {
warna: /(latar belakang|warna)$/i,
tarikh: /Date$/,
},
},
},
};
eksport pratonton lalai;</pre>
<p>我不确定这是否是我的项目,但当我使用 Buku cerita 版本时,我的组件正在工作;"<.code>"<." gt;< ;/p>
<p>不太确定发生了什么!</p>
<p>编辑:</p>
<p>我已经找到了导致错误的文件,它是一个node_modules文件:
<kod>node_modules/react-element-to-jsx-string/dist/cjs/index.js</code></p>