[Bug]: Deeply nested objects as story arguments are corrupted
#24818 opened on Nov 12, 2023
Description
Describe the bug
In case a component accepts deeply nested Objects at some level object properties are converted to [Object] / [Array(n)] string instead of real value when Object control is in use.
Test object:
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": []
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
Corrupted version after modifying story argument in Storybook Object control:
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": [
{
"foo": "bar",
"children": "[Array(1)]"
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
To Reproduce
It is reproducible in any SB instance, with deep enough objects.
Example. (Just put the object from the example as testObjectControl value in the ArgsTable)
System
Storybook Environment Info:
System:
OS: macOS 13.6
CPU: (10) arm64 Apple M1 Pro
Shell: 5.9 - /bin/zsh
Binaries:
Node: 16.20.1 - /usr/local/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.19.4 - /usr/local/bin/npm <----- active
Browsers:
Chrome: 119.0.6045.123
Safari: 17.0
npmPackages:
@storybook/addon-essentials: ^7.6.0-alpha.4 => 7.6.0-alpha.4
@storybook/addon-interactions: ^7.6.0-alpha.4 => 7.6.0-alpha.4
@storybook/addon-links: ^7.6.0-alpha.4 => 7.6.0-alpha.4
@storybook/addon-onboarding: ^1.0.8 => 1.0.8
@storybook/blocks: ^7.6.0-alpha.4 => 7.6.0-alpha.4
@storybook/react: ^7.6.0-alpha.4 => 7.6.0-alpha.4
@storybook/react-vite: ^7.6.0-alpha.4 => 7.6.0-alpha.4
@storybook/test: ^7.6.0-alpha.4 => 7.6.0-alpha.4
chromatic: ^9.0.0 => 9.0.0
storybook: ^7.6.0-alpha.4 => 7.6.0-alpha.4
Additional context
Tested in Storybook 6.5 and 7.5 the issue exists, but in 6.5 this happens even for a smaller amount of levels.
It seems that the reason is in this place: https://github.com/storybookjs/storybook/blob/v6.5.16/lib/channel-postmessage/src/index.ts#L107 the very first updateStoryArgs call, when you update the argument, happens with defaultEventOptions in some reason. (And 25 levels are not enough in the test case.)
core: {
builder: 'webpack4',
channelOptions: { maxDepth: 999 },
},
maxDepth is applied for the next events, and at this stage, the JSON value is already corrupted by the first call with the default options.
It seems that the UPDATE_STORY_ARGS event doesn't respect channelOptions.maxDepth at all.