storybook: Angular regression `Error trying to diff '[...]' Only arrays and iterables are allowed` when using array properties
Describe the bug
Somewhere after 6.4.0-alpha.33
my stories which have an array property with a initial value started to break.
@Component({
selector: 'app-toolbar',
template: `<div
class="texteditor-toolbar"
role="toolbar"
aria-orientation="horizontal"
>
<ng-container *ngFor="let tool of toolbar; let i = index">
<button
class="texteditor-toolbar-action"
[title]="tool.title"
tabindex="-1"
>
{{ tool.icon }}
</button>
</ng-container>
</div>`,
})
export default class ToolbarComponent {
public toolbar: ToolConfig[] = [
{
action: 'heading',
options: { level: 1 },
icon: 'heading1',
title: 'Heading 1',
},
{
action: 'heading',
options: { level: 2 },
icon: 'heading2',
title: 'Heading 2',
},
];
}
This code results in the following error in the console:
Error trying to diff '[
{
action: 'heading',
options: { level: 1 },
icon: 'heading1',
title: 'Heading 1',
},
{
action: 'heading',
options: { level: 2 },
icon: 'heading2',
title: 'Heading 2',
},
]'. Only arrays and iterables are allowed
This appears to happen because storybook tries to set the value of the array it extracted from compodoc as a string. When I add /** @ignore */
to this property it doesn’t happen anymore, because the property is excluded from the documentation. But this isn’t really desirable.
To Reproduce https://github.com/stefan-schweiger/sb-angular-iterator-bug
System
System:
OS: Windows 10 10.0.19043
CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
Binaries:
Node: 14.17.6 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.52)
npmPackages:
@storybook/addon-actions: ^6.4.0-alpha.39 => 6.4.0-alpha.39
@storybook/addon-essentials: ^6.4.0-alpha.39 => 6.4.0-alpha.39
@storybook/addon-links: ^6.4.0-alpha.39 => 6.4.0-alpha.39
@storybook/angular: ^6.4.0-alpha.39 => 6.4.0-alpha.39
@storybook/builder-webpack5: ^6.4.0-alpha.39 => 6.4.0-alpha.39
@storybook/manager-webpack5: ^6.4.0-alpha.39 => 6.4.0-alpha.39
About this issue
- Original URL
- State: open
- Created 3 years ago
- Reactions: 12
- Comments: 16 (1 by maintainers)
I think this is still an issue.
Indeed… It’s (again) an issue with Storybook v6.4.20 (after we upgraded to NG13/NX13).
I ran into this, too. Seems like public class properties are being evaluated as a string, instead of an array.
This is happening in Angular 12.
Temporary solution: Following this suggestion works. Rather than set the property in place, set the value in the constructor, then restart Storybook. It sounds like this is an issue with Compodoc, and once the documentation.json file gets regenerated, you should be good to go.
I’d be open to opening up a PR with a fix if there’s a good chance it will be accepted.
+1 for this issue - Thanks @elliottregan for the workaround of initializing the default value in the constructor. That worked for us.