[Bug]: Syncfusion components not rendering implicitly (CSF3)

[colfin-96]

Describe the bug

Upon updating from SB 7.0 to SB 7.1, all Syncfusion component stories that were using implicit rendering didn't work anymore. Stories that had a template in the render function continued working fine (as well as our own components, that also continue working with implicit rendering). As you can see in this Chromatic build: https://www.chromatic.com/build?appId=62eccae33003c44cf082239d&number=1116, most components are failing. Note that the build only fails on build-storybook. start-storybook works fine, so local development is not affected.

I am trying to create a reproduction but wasn't successful yet (the Storybook + Syncfusion combo is a little difficult to set up). I will continue trying this, but in the meantime I am providing some code snippets of working and failing stories.

A typical Syncfusion component story will look like this:

import { Meta, StoryObj } from '@storybook/angular';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

const meta: Meta<ButtonComponent> = {
  component: ButtonComponent,
  title: 'Standard Components/Button'
};

export default meta;
type Story = StoryObj<ButtonComponent>;

export const Button: Story = {
  args: {
    content: 'Button',
    cssClass: 'e-primary'
  }
};

Note that ButtonComponent is a Syncfusion component and we are rendering implicitly. This worked fine in SB 7.0, but not in SB 7.1 or higher.

After playing around a little, I found some workarounds.

Workaround 1: Including a template and moduleMetadata:

export const Button: Story = {
  render: (args: any) => ({
    props: args,
    moduleMetadata: {
      declarations: [ButtonComponent]
    },
    template: `<button ejs-button cssClass='${args['cssClass']}'>${args['content']}</button>`
  }),

  args: {
    content: 'Button',
    cssClass: 'e-primary'
  }
};

Workaround 2: Creating a demo Angular Component (simple TS and HTML file) as wrapper which is then loaded into the story instead of the component itself, so something like this:

import { Meta, StoryObj } from '@storybook/angular';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { ButtonDemoComponent } from './button-demo.component.ts';

const meta: Meta<ButtonComponent> = {
  component: ButtonDemoComponent,
  title: 'Standard Components/Button'
};

export default meta;
type Story = StoryObj<ButtonComponent>;

export const Button: Story = {
  args: {
    content: 'Button',
    cssClass: 'e-primary'
  }
};

... and the HTML just contains what I have in the template in workaround 1.

Workaround 1 is what we'll go with for now, but it would be nice to be able to use the implicit rendering again as it's super convenient. I will also try to provide a reproduction in the meantime and keep you updated here. If you need any additional info or file contents, please let me know.

Thanks!

To Reproduce

No response

System

Environment Info:

  System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
  Binaries:
    Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.15 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1992.0), Chromium (115.0.1901.203)
  npmPackages:
    @storybook/addon-a11y: ^7.1.0 => 7.3.0
    @storybook/addon-actions: ^7.1.0 => 7.3.0
    @storybook/addon-essentials: ^7.1.0 => 7.3.0
    @storybook/addon-interactions: ^7.1.0 => 7.3.0
    @storybook/addon-links: ^7.1.0 => 7.3.0
    @storybook/addon-mdx-gfm: ^7.1.0 => 7.3.0
    @storybook/addon-storyshots: ^7.1.0 => 7.3.0
    @storybook/addon-storysource: ^7.1.0 => 7.3.0
    @storybook/addons: ^7.1.0 => 7.3.0
    @storybook/angular: ^7.1.0 => 7.3.0
    @storybook/blocks: ^7.1.0 => 7.3.0
    @storybook/components: ^7.1.0 => 7.3.0
    @storybook/core-server: ^7.1.0 => 7.3.0
    @storybook/manager-api: ^7.1.0 => 7.3.0
    @storybook/source-loader: ^7.1.0 => 7.3.0
    @storybook/test-runner: ^0.10.0 => 0.10.0
    @storybook/testing-library: ^0.1.0 => 0.1.0
    @storybook/theming: ^7.1.0 => 7.3.0

Additional context

No response

[vanessayuenn]

One change we made to Storybook for Angular in 7.1 is making prod mode default to true when building storybook. Can you try disabling it and see if that fixes your issue? See https://github.com/storybookjs/storybook/pull/23489.

[meriturva]

The same issue is related to kendo components. see https://github.com/storybookjs/storybook/issues/24636

enabling/disabling prod mode doesn't change the issue.