스토리북 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 버튼 = (소품) =>
반품 (
<div>내 버튼 소품: {Object.keys(props)}</div>
)
}
기본 버튼 내보내기;</pre>
<p>다음과 같은 동화책 이야기가 있습니다.</p>
<pre class="brush:php;toolbar:false;">'react'에서 React를 가져옵니다.
'./'에서 버튼 가져오기;
기본값 내보내기 {
구성요소: <버튼 />,
태그: ['autodocs'],
};
const 내보내기 기본값 = {
인수: {
기본: 사실
},
};</pre>
<p>하지만 Storybook을 실행하면 다음 오류가 발생합니다. </p>
<pre class="brush:php;toolbar:false;">잡히지 않은 TypeError: filterProps.indexOf는 함수가 아닙니다
index.js:576:1
Array.filter에서(<익명>)
formatReactElementNode(index.js:575:1)에서
formatTreeNode(index.js:735:1)에서
formatTree에서(index.js:746:1)
ReactElementToJsxString(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/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],
프레임워크: {
이름: "@storybook/react-webpack5",
옵션: {},
},
문서: {
autodocs: "태그",
},
타이프스크립트: {
ReactDocgen: 거짓
},
webpackFinal: (config) => {
const cssLoaders = [{
로더: 'postcss-로더',
옵션: {
플러그인: [
require('postcss-assets')({ 캐시: true }),
require('autoprefixer')({ 브라우저: ['chrome 44'] })
]
}
}, {
로더: 'sass-loader',
옵션: {
includePaths: ['node_modules', 'src/scss'],
QuietDeps: 사실
}
}]
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,
날짜: /날짜$/,
},
},
},
};
기본 미리보기 내보내기;</pre>
<p>저는 마음에 들지 않는 项目, 但当我使用 Storybook 版本时, 我的组件正재工작 <code>"@storybook/react": "6.1.21",</code>< ;/p>
<p>불태정결정发生了什么!</p>
<p>编辑:</p>
<p>내가 쓴 글은 다음과 같습니다:
<code>node_modules/react-element-to-jsx-string/dist/cjs/index.js</code></p>
내가 놓친
으아악package.json
사실:그것을 없애면 내 스토리북이 다시 실행됩니다. 한숨