TypeError: Cannot read properties of undefined (reading 'selector')

[work933k]

Bug report

Hi! I just started with Chromatic and love find it very powerfull.

I just noticed an error which only occurs in Chromatic and the Chromatic-Storybook. The weird thing is that the error only occurs via Chromatic. If i start Storybook manually, the error doesn't occur.

In Chromatic i see the following "ComponentException":

page.evaluate: Object
    at <anonymous> (/opt/capture/src/chromatic-lib/capture/playwright-renderer/playwrightRenderer.js:804:19)
    at NavigatorWatcher.waitForIdle (/opt/capture/src/chromatic-lib/capture/playwright-renderer/NavigatorWatcher.js:191:11)
    at ChromeRenderer.renderSpecOrTimeout (/opt/capture/src/chromatic-lib/capture/playwright-renderer/playwrightRenderer.js:800:20)
    at ChromeRenderer.renderSpec (/opt/capture/src/chromatic-lib/capture/playwright-renderer/playwrightRenderer.js:690:25)
    at ChromeRenderer.renderSnapshot (/opt/capture/src/chromatic-lib/capture/playwright-renderer/playwrightRenderer.js:441:21)
    at ChromeRenderer.captureSpecs (/opt/capture/src/chromatic-lib/capture/playwright-renderer/playwrightRenderer.js:313:9)
    at ChromeRenderer.executeWithCallback (/opt/capture/src/chromatic-lib/capture/playwright-renderer/playwrightRenderer.js:101:14)
    at Capture.execute (/opt/capture/src/chromatic-lib/capture/capture.js:282:5)
    at FargateWorker.processJob (/opt/capture/src/worker.ts:258:7)
    at FargateWorker.handleJob (/opt/capture/src/worker.ts:137:7)
    at FargateWorker.run (/opt/capture/src/worker.ts:50:9)
    at start (/opt/capture/src/index.ts:33:5)

When i choose to view the Storybook story in Chromatic:

TypeError: Cannot read properties of undefined (reading 'selector')
    at exports.computesTemplateFromComponent (https://647b2a38e4a4f9dfac3a1bec-irxnfbgdit.chromatic.com/3633.6227c296.iframe.bundle.js:401:7531)
    at prepareMain (https://647b2a38e4a4f9dfac3a1bec-irxnfbgdit.chromatic.com/3633.6227c296.iframe.bundle.js:421:3025)
    at https://647b2a38e4a4f9dfac3a1bec-irxnfbgdit.chromatic.com/3633.6227c296.iframe.bundle.js:421:2633
    at https://647b2a38e4a4f9dfac3a1bec-irxnfbgdit.chromatic.com/3633.6227c296.iframe.bundle.js:421:2526
    at cleanArgsDecorator (https://647b2a38e4a4f9dfac3a1bec-irxnfbgdit.chromatic.com/3633.6227c296.iframe.bundle.js:421:3420)
    at https://647b2a38e4a4f9dfac3a1bec-irxnfbgdit.chromatic.com/3633.6227c296.iframe.bundle.js:421:2507
    at https://647b2a38e4a4f9dfac3a1bec-irxnfbgdit.chromatic.com/3633.6227c296.iframe.bundle.js:421:2526
    at https://647b2a38e4a4f9dfac3a1bec-irxnfbgdit.chromatic.com/3633.6227c296.iframe.bundle.js:421:4049
    at hookified (https://647b2a38e4a4f9dfac3a1bec-irxnfbgdit.chromatic.com/sb-preview/runtime.js:7:18973)
    at https://647b2a38e4a4f9dfac3a1bec-irxnfbgdit.chromatic.com/3633.6227c296.iframe.bundle.js:421:2507

The error only occurs on 1 specific Storybook story:

import { componentWrapperDecorator, Meta, moduleMetadata, StoryFn } from '@storybook/angular';
import {
  MatLegacyPaginator as MatPaginator,
  MatLegacyPaginatorModule as MatPaginatorModule,
} from '@angular/material/legacy-paginator';

import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';

export default {
  title: 'Layout/Pagination',
  component: MatPaginator,
  decorators: [
    moduleMetadata({
      imports: [MatPaginatorModule, MatButtonModule],
    }),
    componentWrapperDecorator(
      (story) =>
        `<mat-card class="mat-card-flat">
          <mat-card-content>
            ${story}
          </mat-card-content>
        </mat-card>`
    ),
  ],
  parameters: {
    chromatic: {
      disable: true,
    },
  },
} as Meta;

const Template: StoryFn = (args: MatPaginator) => ({
  props: args,
});

export const Primary = {
  render: Template,

  args: {
    showFirstLastButtons: false,
    pageSize: 10,
    hidePageSize: true,
    length: 30,
  },
};

Is this a know issue? I suspect it has got something to do with specific package versions. This as the issue started to occur, after i upgraded to latest versions.

[Rohydre]

OK, since i solved this on my own, i'll also give you my workaround.

Basically don't use the component field of Storybook, instead use a template in the render function. I think it's a bug because storyboook try to recompile an already compiled component from a node_module. I'm not 100% sure of my word on this guess.

Anyways, your code will look like this:

...

export default {
  title: 'Layout/Pagination',
  component: MatPaginator,          <----- REMOVE THIS
  decorators: [

...    

const Template: StoryFn = (args: MatPaginator) => ({
  props: args,
  template : `<mat-paginator          
        [showFirstLastButtons]="showFirstLastButtons"
        [pageSize]="pageSize"                               <----- DO THIS INSTEAD
        [hidePageSize]="hidePageSize"
        [length]="length">
        </mat-paginator>`
});

...