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

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

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

问题

我有一个简单的React组件：

  1. import React from 'react';
  3. const Button = (props) => {
  5.   return (
  6.     <div>My Button props: {Object.keys(props)}</div>
  7.   )
  8. }
  10. export default Button;

我有一个storybook故事，如下所示：

  1. import React from 'react';
  3. import Button from './';
  5. export default {
  6.   component: <Button />,
  7.   tags: ['autodocs'],
  8. };
  10. export const Default = {
  11.   args: {
  12.     primary: true
  13.   },
  14. };

但是当storybook运行时，我得到以下错误：

  1. Uncaught TypeError: filterProps.indexOf is not a function
  2.     at index.js:576:1
  3.     at Array.filter (<anonymous>)
  4.     at formatReactElementNode (index.js:575:1)
  5.     at formatTreeNode (index.js:735:1)
  6.     at formatTree (index.js:746:1)
  7.     at reactElementToJsxString (index.js:786:1)
  8.     at config.mjs:19:1
  9.     at mapSingleChildIntoContext (react.development.js:1149:1)
  10.     at traverseAllChildrenImpl (react.development.js:1007:1)
  11.     at traverseAllChildren (react.development.js:1092:1)

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

.storybook/main.js：

  1. module.exports = {
  2.   stories: [
  3.     "../src/**/*.story.@(js|jsx|ts|tsx)",
  4.   ],
  5.   addons: [
  6.     "@storybook/addon-links",
  7.     "@storybook/addon-essentials",
  8.     "@storybook/addon-interactions",
  9.   ],
  10.   framework: {
  11.     name: "@storybook/react-webpack5",
  12.     options: {},
  13.   },
  14.   docs: {
  15.     autodocs: "tag",
  16.   },
  17.   typescript: {
  18.     reactDocgen: false
  19.   },
  20.   webpackFinal: (config) => {
  21.     const cssLoaders = [{
  22.       loader: 'postcss-loader',
  23.       options: {
  24.         plugins: [
  25.           require('postcss-assets')({ cache: true }),
  26.           require('autoprefixer')({ browsers: ['chrome 44'] })
  27.         ]
  28.       }
  29.     }, {
  30.       loader: 'sass-loader',
  31.       options: {
  32.         includePaths: ['node_modules', 'src/scss'],
  33.         quietDeps: true
  34.       }
  35.     }]
  37.     config.module.rules.push({
  38.       test: /\.js?$/,
  39.       exclude: /(node_modules|coverage|target)/,
  40.       loader: 'babel-loader',
  41.       options: {
  42.         plugins: ['@babel/plugin-syntax-dynamic-import']
  43.       }
  44.     }, {
  45.       test: /\.s?css$/,
  46.       use: ['style-loader', ...cssLoaders]
  47.     });
  49.     return config;
  51.   },
  52. }

.storybook/preview.js：

  1. const preview = {
  2.   parameters: {
  3.     actions: { argTypesRegex: "^on[A-Z].*" },
  4.     controls: {
  5.       matchers: {
  6.         color: /(background|color)$/i,
  7.         date: /Date$/,
  8.       },
  9.     },
  10.   },
  11. };
  13. 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:

  1. import React from &#39;react&#39;;
  3. const Button = (props) =&gt; {
  5.   return (
  6.     &lt;div&gt;My Button props: {Object.keys(props)}&lt;/div&gt;
  7.   )
  8. }
  10. export default Button;

And I have a storybook story as follows:

  1. import React from &#39;react&#39;;
  3. import Button from &#39;./&#39;;
  5. export default {
  6.   component: &lt;Button /&gt;,
  7.   tags: [&#39;autodocs&#39;],
  8. };
  10. export const Default = {
  11.   args: {
  12.     primary: true
  13.   },
  14. };

But when storybook runs, I get the following error:

  1. Uncaught TypeError: filterProps.indexOf is not a function
  2.     at index.js:576:1
  3.     at Array.filter (&lt;anonymous&gt;)
  4.     at formatReactElementNode (index.js:575:1)
  5.     at formatTreeNode (index.js:735:1)
  6.     at formatTree (index.js:746:1)
  7.     at reactElementToJsxString (index.js:786:1)
  8.     at config.mjs:19:1
  9.     at mapSingleChildIntoContext (react.development.js:1149:1)
  10.     at traverseAllChildrenImpl (react.development.js:1007:1)
  11.     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:

  1. module.exports = {
  2.   stories: [
  3.     &quot;../src/**/*.story.@(js|jsx|ts|tsx)&quot;,
  4.   ],
  5.   addons: [
  6.     &quot;@storybook/addon-links&quot;,
  7.     &quot;@storybook/addon-essentials&quot;,
  8.     &quot;@storybook/addon-interactions&quot;,
  9.   ],
  10.   framework: {
  11.     name: &quot;@storybook/react-webpack5&quot;,
  12.     options: {},
  13.   },
  14.   docs: {
  15.     autodocs: &quot;tag&quot;,
  16.   },
  17.   typescript: {
  18.     reactDocgen: false
  19.   },
  20.   webpackFinal: (config) =&gt; {
  21.     const cssLoaders = [{
  22.       loader: &#39;postcss-loader&#39;,
  23.       options: {
  24.         plugins: [
  25.           require(&#39;postcss-assets&#39;)({ cache: true }),
  26.           require(&#39;autoprefixer&#39;)({ browsers: [&#39;chrome 44&#39;] })
  27.         ]
  28.       }
  29.     }, {
  30.       loader: &#39;sass-loader&#39;,
  31.       options: {
  32.         includePaths: [&#39;node_modules&#39;, &#39;src/scss&#39;],
  33.         quietDeps: true
  34.       }
  35.     }]
  37.     config.module.rules.push({
  38.       test: /\.js?$/,
  39.       exclude: /(node_modules|coverage|target)/,
  40.       loader: &#39;babel-loader&#39;,
  41.       options: {
  42.         plugins: [&#39;@babel/plugin-syntax-dynamic-import&#39;]
  43.       }
  44.     }, {
  45.       test: /\.s?css$/,
  46.       use: [&#39;style-loader&#39;, ...cssLoaders]
  47.     });
  49.     return config;
  51.   },
  52. }

.storybook/preview.js:

  1. const preview = {
  2.   parameters: {
  3.     actions: { argTypesRegex: &quot;^on[A-Z].*&quot; },
  4.     controls: {
  5.       matchers: {
  6.         color: /(background|color)$/i,
  7.         date: /Date$/,
  8.       },
  9.     },
  10.   },
  11. };
  14. 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 中的以下部分：

  1.  "overrides": {
  2.     "react-element-to-jsx-string": "14.0.2"
  3.   },

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

英文:

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

  1.  &quot;overrides&quot;: {
  2.     &quot;react-element-to-jsx-string&quot;: &quot;14.0.2&quot;
  3.   },

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
  • reactjs
  • storybook
匿名

发表评论

匿名网友

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

确定