Storybook: [addon-info] minified source code on static build

[rwieruch]

Hello there,

thanks for providing all these great add-ons for Storybook. Today I ran into an issue for the static build of Storybook with the add-on addon-info. All the information looks alright for the development build of Storybook. But if I do a static build for production and run the .out folder locally with http-server, the React component names are not the same anymore:

As you can see, for addon-storysource everything is displayed fine, but not for addon-info. Also the PropTypes don't reflect the actual values anymore:

Development:

Production:

As workaround I tried to exclude Uglify in my own webpack.config.js in .storybook/webpack.config.js, but it didn't work. This would be only a short-term solution though:

const path = require('path');

// Export a function. Accept the base config as the only param.
module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.module.rules.push(
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader'],
    },
    {
      test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
      use: ['file-loader'],
    },
    {
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    },
    {
      test: /stories\.(js|jsx)?$/,
      loaders: [require.resolve('@storybook/addon-storysource/loader')],
      enforce: 'pre',
    },
  );

  // doesn't work
  storybookBaseConfig.plugins = storybookBaseConfig.plugins.filter(
    p => p.constructor.name !== 'UglifyJsPlugin',
  );

  return storybookBaseConfig;
};

Any help for this is much appreciated 👍

[igor-dv]

Maybe you need to add the displayName to your component?

[rwieruch]

Yep, it works this way. If that's the official way to deal with it, the issue can be closed.