Storybook 7.0.23 - TypeError:filterProps.indexOf 不是函數
P粉333395496
P粉333395496 2023-09-03 23:16:35
0
1
472
<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

;
P粉333395496
P粉333395496

全部回覆(1)
P粉731977554

我錯過了 package.json 有以下內容的事實:

"overrides": {
    "react-element-to-jsx-string": "14.0.2"
  },

擺脫它可以讓我的故事書重新開始運行。 嘆息

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板