Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kgoggin opened this issue Jun 1, 2020 · 1 comment
Open

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

kgoggin opened this issue Jun 1, 2020 · 1 comment

Comments

@kgoggin
Copy link
Collaborator

kgoggin commented Jun 1, 2020

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!

@davesnx
Copy link
Contributor

davesnx commented Sep 12, 2020

Oh, that seems massive. Do we have any issue on rescript for this?

Seems something that these bindings can include out of the box, but seems a little wrong to monkeypatch the webpack config of bs-storybook users.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

2 participants