英文:
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 'react';
const Button = (props) => {
return (
<div>My Button props: {Object.keys(props)}</div>
)
}
export default Button;
And I have a storybook story as follows:
import React from 'react';
import Button from './';
export default {
component: <Button />,
tags: ['autodocs'],
};
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 (<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)
I notice that when I get rid of the args
in my storybook story, then the component renders.
.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;
I'm not sure if it's my project or not, but my component was working when I was using Storybook version "@storybook/react": "6.1.21",
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:
"overrides": {
"react-element-to-jsx-string": "14.0.2"
},
Getting rid of that gets my storybook back up and running. sigh
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论