Kendo Ui Grid with Storybook in Angular

Viewed 311

I have a problem with Storybook.js and Kendo Ui Grid for Angular.

My Storybook code:

export default {
      title: 'ParamsetVersionDetails',
      component: VersionDetailsComponent,
      decorators: [
        moduleMetadata({
          imports: [
            CommonModule,
            GridModule,
            ],
        }),
      ],
    };

  export const Text = () => ({
    component: VersionDetailsComponent,
    props: {
      data: [
      {
        name: 'test',
        prompt: 'test',
        format: 'test',},],},
  });

And the Template from VersionDetailsComponent:

<kendo-grid
      [data]="data"
      [height]="550"
      [navigable]="true"
    >
      <kendo-grid-column
        title="Param Name"
        field="name"
        width="120"
      ></kendo-grid-column>
      <kendo-grid-column
        title="Prompt"
        field="prompt"
        width="80"
      ></kendo-grid-column>
      <kendo-grid-column
        title="Format"
        field="format"
        width="80"
      ></kendo-grid-column>
</kendo-grd>

I start the Storybook and becomes this Console Error:

core.js:4352 ERROR TypeError: Class constructor EventEmitter_ cannot be invoked without 'new' at new ZoneAwareEventEmitter (index.js:2484) at new GridComponent (index.js:8504) at NodeInjectorFactory.GridComponent_Factory [as factory] (index.js:10467) at getNodeInjectable (core.js:4184) at instantiateAllDirectives (core.js:8102) at createDirectivesInstances (core.js:7476) at ɵɵelementStart (core.js:14800) at VersionDetailsComponent_Template (template.html:1) at executeTemplate (core.js:7449) at renderView (core.js:7258)

The solution is create a webpack.config.js in .storybook folder:

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = async ({ config }) => {
  const mainFields = [
    'es2015',
    'browser',
    'module',
    'main',
  ];

  config.resolve.plugins = [new TsconfigPathsPlugin({
    configFile: 'tsconfig.app.json',
    mainFields
  })];

  config.resolve.mainFields = mainFields;

  return config;
};
0 Answers
Related