How to disable mangled component names during build-storybook

[stipsan]

Hey,

When you build a static storybook the component names get mangled, as seen here: http://uikit-react.io/

This is suboptimal when using the React Storybook Info Addon
I've tried to use the "full-control" mode but without luck.

Here's the webpack config for the storybook: https://github.com/stipsan/uikit-react/blob/master/.storybook/webpack.config.js

[thani-sh]

It's happening because component names are getting minified. It's done by the uglifyjs plugin here. You can remove that plugin with the "ful-control" mode to fix the issue. A better solution is to set the displayName property for your React Components so it'll work with the info addon and React Devtools.

[arunoda]

I think thanish has the answer. Check the storybook-addon repo's issues for more info on this.

[stipsan]

Hey guys,

While the displayName solution works in most cases, it appears it does not work for components passed as props.

Example: https://form.uikit-react.io/?selectedKind=renderInput&selectedStory=Basic%20Usage&full=0&down=1&left=1&panelRight=0

Here it should be:

<Field
    component={renderField}

But instead it's:

<Field
    component={c()}

Despite giving it displayName here.

Is it possible to override the mangle without having to use full-control mode? With Webpack 2 closing in, having to do full-control mode will likely have to be redone then.

Thanks