storybook: Storybook 3.2 is failing to build static export

storybookBaseConfig.plugins.pop();

It relies on the fact that uglify plugin is first, I use plugins = plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin' instead (when addressing an issue with third-party addon)

Will try and come up with a pull request over the next couple of days…

build-storybook doesn’t currently use the custom .babelrc. If anyone wants to try and fix it, please do.

issue tracked here: https://github.com/storybooks/storybook/issues/1731

@danielduan I’ve recently upgraded a bunch of webpack configs to use the uglifyjs-webpack-plugin which uses uglifyjs v1, rather than 0.4* that is under webpack.optimize.UglifyJsPlugin. I did the same in the extension mode of the storybook webpack config by removing the existing plugin and adding uglifyjs-webpack-plugin instead. The issue appears fixed, so maybe upgrading the webpack config to use this plugin by default rather than the bundled webpack plugin might help?

(I haven’t had any issues upgrading to the latest uglifyjs, however I didn’t do a full analysis of the changes between the 2 versions, and the webpack team hasn’t upgraded to this. This could be because the config format for the v1 version has changed)

@ndelangen why does storybook’s static build even require minification, would it not be beneficial to leave it unminified because the end users might want to check the output in react developer tools to see the components if this tool is meant for development?

Also, if I use another minifier plugin in my .storybook/webpack.config.js, would that remove UglifyJs as the minifer. Is there a way to opt out of minification when using build-storybook.

Also, given that you do not support a custom babel config, why should I use a babel config for the entire app that transpiles to ES5 when most browsers have good support for ES6.

If anyone else needs a quick workaround for this issue that still minifies the static build here’s my workaround. It swaps the Webpack plugin for UglifyJs with the plugin for babel minify.

1. Install babel-minify-webpack-plugin

yarn add -dev babel-minify-webpack-plugin

1. Create a new webpack.config.js inside .storybook/

const MinifyPlugin = require("babel-minify-webpack-plugin");

module.exports = (storybookBaseConfig, configType) => ({
  ...storybookBaseConfig,
  plugins: storybookBaseConfig.plugins.reduce((pluginsList, plugin) => ([
      ...pluginsList,
      configType === 'PRODUCTION' && plugin.constructor.name === 'UglifyJsPlugin'
        ? new MinifyPlugin({mangle: false})
        : plugin
    ]), [])
});

FYI, our webpack.config.js:

    const path = require('path');
    
    const include = [
        path.resolve(__dirname, '..', 'src'),
        path.resolve(__dirname, '..', '.storybook')
    ];
    
    module.exports = (storybookBaseConfig, configType) => {
        if (configType === 'PRODUCTION') {
            // see https://github.com/storybooks/storybook/issues/1570
            storybookBaseConfig.plugins = storybookBaseConfig.plugins.filter(plugin => plugin.constructor.name !== 'UglifyJsPlugin')
        }
    
        storybookBaseConfig.module = {
            rules: [
                {
                    test: /\.jsx?$/,
                    include,
                    use: [{
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true
                        }
                    }]
                },
                {
                    test: /\.(gif|jpe?g|png)$/,
                    include,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {}
                        }
                    ]
                },
                {
                    test: /\.scss$/,
                    include,
                    use: [
                        {
                            loader: 'style-loader',
                            options: {
                                sourceMap: false
                            }
                        },
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                importLoaders: 2,
                                localIdentName: '[name]__[hash:base64:5]',
                                sourceMap: false
                            }
                        },
                        {
                            loader: 'postcss-loader'
                        },
                        {
                            loader: 'sass-loader'
                        }]
                },
                {
                    test: /\.css$/,
                    include: /(node_modules)/,
                    use: [{
                        loader: 'style-loader'
                    }, {
                        loader: 'css-loader'
                    }]
                }
            ]
        };
        return storybookBaseConfig;
    };

I have the same issue:

Unexpected token: operator (>) [static/preview.de25e99261103d1bf99c.bundle.js:78911,27]

This could be because UglifyJS doesn’t support any ES6 yet. Make sure babel is transpiling down to ES5.