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)

Most upvoted comments

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.