<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
在 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>
module.exports = {
故事:[
“../src/**/*.story.@(js|jsx|ts|tsx)”,
],
插件:[
“@storybook/addon-links”,
“@storybook/addon-essentials”,
“@storybook/addon-interactions”,
],
框架: {
名稱:“@storybook/react-webpack5”,
選項: {},
},
文件:{
自動文件:“標籤”,
},
打字稿:{
反應文檔根:假
},
webpackFinal: (配置) => {
常數 cssLoaders = [{
載入器:'postcss-loader',
選項: {
插件:[
require('postcss-assets')({ 快取: true }),
require('autoprefixer')({ 瀏覽器: ['chrome 44'] })
]
}
}, {
加載器:'sass-加載器',
選項: {
includePaths: ['node_modules', 'src/scss'],
安靜Deps:正確
}
}]
config.module.rules.push({
測試:/\.js?$/,
排除:/(node_modules|覆蓋|目標)/,
加載器:'巴別塔加載器',
選項: {
插件:['@babel/plugin-syntax-dynamic-import']
}
}, {
測試:/\.s?css$/,
使用:['樣式載入器',...cssLoaders]
});
返回配置;
},
}</pre>
<p>.storybook/preview.js:</p>
<pre class="brush:php;toolbar:false;">const 預覽 = {
參數: {
actions: { argTypesRegex: "^on[A-Z].*"; },
控制:{
匹配器:{
顏色:/(背景|顏色)$/i,
日期:/日期$/,
},
},
},
};
導出預設預覽;</pre>
<p>我不確定這是否是我的項目,但當我使用 Storybook 版本時,我的組件正在工作 <code>"@storybook/react": "6.1.21",</code>< ;/p>
<p>不確定發生了什麼事!</p>
<p>編:</p>
<p>我已經找到了導致錯誤的文件,它是一個node_modules文件:
node_modules/react-element-to-jsx-string/dist/cjs/index.js
;
我錯過了
package.json
有以下內容的事實:擺脫它可以讓我的故事書重新開始運行。 嘆息