Storybook 7.0.23 – TypeError: filterProps.indexOf is not a function

huangapple go评论63阅读模式
英文:

Storybook 7.0.23 - TypeError: filterProps.indexOf is not a function

问题

我有一个简单的React组件:

import React from 'react';

const Button = (props) => {

  return (
    <div>My Button props: {Object.keys(props)}</div>
  )
}

export default Button;

我有一个storybook故事,如下所示:

import React from 'react';

import Button from './';

export default {
  component: <Button />,
  tags: ['autodocs'],
};

export const Default = {
  args: {
    primary: true
  },
};

但是当storybook运行时,我得到以下错误:

Uncaught TypeError: filterProps.indexOf is not a function
    at 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)

我注意到当我在storybook故事中去掉args时,组件就可以渲染。

.storybook/main.js:

module.exports = {
  stories: [
    "../src/**/*.story.@(js|jsx|ts|tsx)",
  ],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  typescript: {
    reactDocgen: false
  },
  webpackFinal: (config) => {
    const cssLoaders = [{
      loader: 'postcss-loader',
      options: {
        plugins: [
          require('postcss-assets')({ cache: true }),
          require('autoprefixer')({ browsers: ['chrome 44'] })
        ]
      }
    }, {
      loader: 'sass-loader',
      options: {
        includePaths: ['node_modules', 'src/scss'],
        quietDeps: true
      }
    }]

    config.module.rules.push({
      test: /\.js?$/,
      exclude: /(node_modules|coverage|target)/,
      loader: 'babel-loader',
      options: {
        plugins: ['@babel/plugin-syntax-dynamic-import']
      }
    }, {
      test: /\.s?css$/,
      use: ['style-loader', ...cssLoaders]
    });

    return config;

  },
}

.storybook/preview.js:

const preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export default preview;

我不确定是不是我的项目问题,但是当我使用Storybook版本 @storybook/react": "6.1.21 时,我的组件是可以工作的。

不太确定发生了什么!

编辑:

我已经追踪到导致错误的文件,它是一个node_modules文件:
node_modules/react-element-to-jsx-string/dist/cjs/index.js

英文:

I have a simple React component:

import React from &#39;react&#39;;

const Button = (props) =&gt; {

  return (
    &lt;div&gt;My Button props: {Object.keys(props)}&lt;/div&gt;
  )
}

export default Button;

And I have a storybook story as follows:

import React from &#39;react&#39;;

import Button from &#39;./&#39;;

export default {
  component: &lt;Button /&gt;,
  tags: [&#39;autodocs&#39;],
};

export const Default = {
  args: {
    primary: true
  },
};

But when storybook runs, I get the following error:

Uncaught TypeError: filterProps.indexOf is not a function
    at index.js:576:1
    at Array.filter (&lt;anonymous&gt;)
    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)

I notice that when I get rid of the args in my storybook story, then the component renders.

.storybook/main.js:

module.exports = {
  stories: [
    &quot;../src/**/*.story.@(js|jsx|ts|tsx)&quot;,
  ],
  addons: [
    &quot;@storybook/addon-links&quot;,
    &quot;@storybook/addon-essentials&quot;,
    &quot;@storybook/addon-interactions&quot;,
  ],
  framework: {
    name: &quot;@storybook/react-webpack5&quot;,
    options: {},
  },
  docs: {
    autodocs: &quot;tag&quot;,
  },
  typescript: {
    reactDocgen: false
  },
  webpackFinal: (config) =&gt; {
    const cssLoaders = [{
      loader: &#39;postcss-loader&#39;,
      options: {
        plugins: [
          require(&#39;postcss-assets&#39;)({ cache: true }),
          require(&#39;autoprefixer&#39;)({ browsers: [&#39;chrome 44&#39;] })
        ]
      }
    }, {
      loader: &#39;sass-loader&#39;,
      options: {
        includePaths: [&#39;node_modules&#39;, &#39;src/scss&#39;],
        quietDeps: true
      }
    }]

    config.module.rules.push({
      test: /\.js?$/,
      exclude: /(node_modules|coverage|target)/,
      loader: &#39;babel-loader&#39;,
      options: {
        plugins: [&#39;@babel/plugin-syntax-dynamic-import&#39;]
      }
    }, {
      test: /\.s?css$/,
      use: [&#39;style-loader&#39;, ...cssLoaders]
    });

    return config;

  },
}

.storybook/preview.js:

const preview = {
  parameters: {
    actions: { argTypesRegex: &quot;^on[A-Z].*&quot; },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};


export default preview;

I'm not sure if it's my project or not, but my component was working when I was using Storybook version &quot;@storybook/react&quot;: &quot;6.1.21&quot;,

Not really sure what is going on!

Edit:

I've tracked down the file that's causing the error, and its a node_modules file:
node_modules/react-element-to-jsx-string/dist/cjs/index.js

答案1

得分: 1

我错过了 package.json 中的以下部分:

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

去掉这部分就能让我的Storybook重新运行起来。 叹气

英文:

I missed the fact that package.json had the following:

 &quot;overrides&quot;: {
    &quot;react-element-to-jsx-string&quot;: &quot;14.0.2&quot;
  },

Getting rid of that gets my storybook back up and running. sigh

huangapple
  • 本文由 发表于 2023年6月26日 00:30:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/76551420.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定