Storybook 7.0.23 - TypeError: filterProps.indexOf は関数ではありません
P粉333395496
2023-09-03 23:16:35
<p>単純な React コンポーネントがあります: </p>
<pre class="brush:php;toolbar:false;">React を 'react' からインポートします。
const Button = (props) => {
戻る (
<div>私のボタンの小道具: {Object.keys(props)}</div>
)
}
デフォルトのボタンをエクスポート;</pre>
<p>次のような絵本のストーリーがあります:</p>
<pre class="brush:php;toolbar:false;">React を 'react' からインポートします。
'./' からボタンをインポートします。
デフォルトのエクスポート {
コンポーネント: <ボタン />、
タグ: ['autodocs']、
};
エクスポート定数 デフォルト = {
引数: {
プライマリ: true
}、
};</pre>
<p>しかし、ストーリーブックを実行すると、次のエラーが発生します: </p>
<pre class="brush:php;toolbar:false;">Uncaught TypeError: filterProps.indexOf は関数ではありません
Index.js:576:1 で
Array.filter で (<匿名>)
formatReactElementNode (index.js:575:1) で
formatTreeNode (index.js:735:1) で
formatTree (index.js:746:1) で
反応要素ToJsxString (index.js:786:1)
config.mjs:19:1 で
MapSingleChildIntoContext (react.development.js:1149:1) で
traverseAllChildrenImpl (react.development.js:1007:1) で
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 = {
ストーリー: [
"../src/**/*.story.@(js|jsx|ts|tsx)"、
]、
アドオン: [
「@storybook/アドオンリンク」、
「@storybook/addon-essentials」、
「@storybook/addon-interactions」、
]、
フレームワーク: {
名前: "@storybook/react-webpack5"、
オプション: {}、
}、
ドキュメント: {
autodocs: "タグ"、
}、
タイプスクリプト: {
反応Docgen: false
}、
webpackFinal: (config) => {
const cssLoaders = [{
ローダー: 'postcss-loader',
オプション: {
プラグイン: [
require('postcss-assets')({ キャッシュ: true })、
require('autoprefixer')({ ブラウザ: ['chrome 44'] })
】
}
}、{
ローダー: 'sass-loader',
オプション: {
includePaths: ['node_modules', 'src/scss'],
QuietDeps: true
}
}]
config.module.rules.push({
テスト: /\.js?$/,
除外: /(node_modules|coverage|target)/,
ローダー: 'バベルローダー',
オプション: {
プラグイン: ['@babel/plugin-syntax-dynamic-import']
}
}、{
テスト: /\.s?css$/,
使用: ['style-loader', ...cssLoaders]
});
構成を返します。
}、
}</pre>
<p>.storybook/preview.js:</p>
<pre class="brush:php;toolbar:false;">const プレビュー = {
パラメーター: {
アクション: { argTypesRegex: "^on[A-Z].*" }、
コントロール: {
マッチャー: {
色: /(背景|色)$/i、
日付: /Date$/、
}、
}、
}、
};
デフォルトのプレビューをエクスポート;</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>
package.json
に次の内容が含まれていることを見逃していました:それを取り除くと、ストーリーブックを再び実行できるようになります。 ###はぁ######