Storybook: Storybook 3.2 is failing to build static export

[hakimelek]

• using @storybook/react 3.2.0

.babelrc
{ "presets": ["es2015", "stage-0", "react"] }

Running build-storybook throws this error. It looks like we should use uglifyjs-webpack-plugin according to https://stackoverflow.com/questions/42375468/uglify-syntaxerror-unexpected-token-punc

Building storybook ...
Failed to build the storybook
static/manager.7b465898ead542baaf4e.bundle.js from UglifyJs
Unexpected token: punc ()) [static/manager.7b465898ead542baaf4e.bundle.js:45694,3]
static/preview.577ee8de40d8c6c75e21.bundle.js from UglifyJs
Unexpected token: punc ()) [static/preview.577ee8de40d8c6c75e21.bundle.js:131238,3]

[ndelangen]

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

[hakimelek]

Do you recommend any plugin I should use for that?

[captainkovalsky]

I have the same problem, trying to find some workaround

[hakimelek]

Here is my workaround, it's not a good idea but it works for now:

Just get rid of UglifyJs on prod. Create a new webpack.config.js inside .storybook.

const path = require('path');

module.exports = (storybookBaseConfig, configType) => {
  if (configType === 'PRODUCTION') {
    // Removing uglification until we figure out a fix for that.
    storybookBaseConfig.plugins.pop();
  }
  return storybookBaseConfig;
};

[slorber]

I have the same issue:

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

[slorber]

I can confirm the hack of @hakimelek solves the problem. Here's how to handle it if you normally use extension mode you have to apply the merge manually:

const merge = require('webpack-merge')

const sharedWebpackConfig = require('./../config/webpack/shared');

module.exports = (storybookBaseConfig, configType) => {

  if (configType === 'PRODUCTION') {
    // Removing uglification until we figure out a fix for that.
    storybookBaseConfig.plugins.pop();
  }


  const extension = {
    resolve: {
      modules: [
        'node_modules',
        '../frontend'
      ]
    },
    plugins: sharedWebpackConfig.plugins,
    module: {
      rules: sharedWebpackConfig.module.rules
    },
  };

  return merge(storybookBaseConfig,extension);
};

[Hypnosphi]

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)

[vamsiampolu]

@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.

[Hypnosphi]

if I use another minifier plugin in my .storybook/webpack.config.js, would that remove UglifyJs as the minifer

Only in full control mode (the one used in snippets above)

[Hypnosphi]

you do not support a custom babel config

Well, it's only half true. It's supported, but only in form of local .babelrc file

[dptoot]

I was experiencing this as well. My issue seems to stem from a dependency of a dependency that looks to be unwilling to build a compiled source that is suitable for webpack/babel.

https://github.com/yeoman/stringify-object/issues/35

It looks to be compiling within their node_module to preserve arrow functions that uglify implodes on.

Any thoughts from anyone on how to handle this?

[Hypnosphi]

Well, this is exactly the "issue with third-party addon" I was talking about =) My solution was to disable UglifyJS, but if you want to target pre-ES6 browser, looks like you have to transpile that module (and its dependency get-own-enumerable-property-symbols) along with your code.

[benzaita]

Make sure babel is transpiling down to ES5.

@ndelangen - shouldn't this make sure it's transpiled to ES5?

[Hypnosphi]

It does, but only for the files included into babel-loader rule (node_modules is excluded by default)

[malixsys]

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

[MadsMadsDk]

I've found that I experience a similar issue, though not quite the same. Not sure if it should be a separate issue, if so, please say so.

Anyway, I'm using a custom .babelrc file, that looks like this:

{
  "presets": [
    "es2015",
    "react",
    "env"
  ],
  "plugins": ["add-react-displayname"],
  "env": {
    "development": {
      "sourceMaps": "inline"
    },
    "production": {
      "ignore": [
        "*.stories.js",
        "*.test.js"
      ]
    },
    "test": {
      "plugins" : ["istanbul"]
    }
  }
}

When I run build-storybook, it does generate the static app, but when I load it up in my browser, I get this error:

Module parse failed: /my-storybook-app/node_modules/@storybook/react/node_modules/babel-loader/lib/index.js??ref--0!/my-storybook-app/src/Welcome.stories.js Unexpected token (10:4) You may need an appropriate loader to handle this file type. | storiesOf('Readme', module) | .add('to Storybook', () => ( | <Welcome showApp={linkTo('Button')} /> | )); |
Error: Module parse failed: /my-storybook-app/node_modules/@storybook/react/node_modules/babel-loader/lib/index.js??ref--0!/my-storybook-app/src/Welcome.stories.js Unexpected token (10:4)
You may need an appropriate loader to handle this file type.
| storiesOf('Readme', module)
|   .add('to Storybook', () => (
|     <Welcome showApp={linkTo('Button')} />
|   ));
| 
    at Object.<anonymous> (http://localhost:8000/static/preview.e526a42327b2c689d21b.bundle.js:1:765870)
    at __webpack_require__ (http://localhost:8000/static/preview.e526a42327b2c689d21b.bundle.js:1:223)
    at webpackContext (http://localhost:8000/static/preview.e526a42327b2c689d21b.bundle.js:1:877040)
    at http://localhost:8000/static/preview.e526a42327b2c689d21b.bundle.js:1:719379
    at Array.forEach (<anonymous>)
    at loadStories (http://localhost:8000/static/preview.e526a42327b2c689d21b.bundle.js:1:719345)
    at ConfigApi.value (http://localhost:8000/static/preview.e526a42327b2c689d21b.bundle.js:1:755013)
    at render (http://localhost:8000/static/preview.e526a42327b2c689d21b.bundle.js:1:755498)
    at ConfigApi.value (http://localhost:8000/static/preview.e526a42327b2c689d21b.bundle.js:1:755762)
    at Object.<anonymous> (http://localhost:8000/static/preview.e526a42327b2c689d21b.bundle.js:1:719646)

Once I remove .babelrc and use the default config, it works. This is not a viable solution though, as I need to be able to build my components, with the purpose of publishing them as an npm package. So I need my custom .babelrc.

Any suggestions as to what might cause the problem in my .babelrc file?

[danielduan]

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

[hermanvos]

@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]

@hermanvos Thank you so much for giving that a test, It's been on my agenda for sure, but I've been a bit overloaded with many different things that I just haven't been able to open a branch and check it out. Again thanks!

We update a ton of packages semi automatically, but maybe this package is special in some way. Any help you can provide with a PR and testing is very welcome! @Hypnosphi does most of the dependendencies-updates these days with a tool https://www.dependencies.io/. I'm giving them a shout-out because their service is awesome!

[Hypnosphi]

maybe this package is special in some way

We don't use it directly, only via webpack's builtin plugin

[hermanvos]

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

[jkingworking]

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
    ]), [])
});

[ndelangen]

@hermanvos Need any help opening a PR? If there's anything I can do to help, let me know!

[hermanvos]

@ndelangen I have a change but haven't been able to test it yet... will try and get on to it this week.

[AshCoolman]

@jkingworking 's solution didn't work for me for some reason - my even more table-flippy version:

module.exports = (storybookBaseConfig, configType) => ({
  ...storybookBaseConfig,
  plugins: storybookBaseConfig.plugins.filter((plugin) =>
    plugin.constructor.name !== 'UglifyJsPlugin'
  )});

[pascalduez]

@AshCoolman Theoretically this is not needed anymore with latest versions of storybook.