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;
};