Skip to content

Storybook's production webpack config can cause issues with BS #11

@kgoggin

Description

@kgoggin

I'm adding this here in case it affects any other users of these bindings. This issue plagued codebase for, no joke, over a year, before I finally figured it out last week. I'm not sure if there's a way to provide an easy fix alongside the bindings, but maybe we could document it in the README at least?

When building storybook (using the build-storybook command), it uses a different version of its webpack config that includes a couple of plugins to uglify the JS output. Among other things, these transform all instances of undefined to void 0. This in turn can cause some issues for BS, specifically when it's checking the arity of a function that includes a unit parameter. The error presented as:

TypeError: f.apply is not a function

in the Curry module of BS.

There's a related issue in the ReasonReact repo that I, unfortunately, didn't find until after I'd already figured it out.

Again, this only pops up if you're building Storybook for prod (we use Chromatic and it kept popping up there) so if you're just running it locally you won't bump up against it.

Here's how I updated our webpack config to fix it:

module.exports = ({ config }) => {
  if (
    config.optimization &&
    config.optimization.minimizer &&
    config.optimization.minimizer.length
  ) {
    config.optimization.minimizer[0].options.terserOptions.typeofs = false;
  }

  // should be babel
  const babelConfig = config.module.rules[0].use[0];

  // remove babel-preset-minify
  babelConfig.options.presets = babelConfig.options.presets.filter(preset => {
    return !(
      Array.isArray(preset) && Object.keys(preset[1]).includes("mangle")
    );
  });

// any other custom webpack stuff...

return config;
};

So, probably not something these bindings can provide an out-of-the-box fix for, but figured at least this might help someone else who bumps into it!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions