v4.1.0 stop allowing webpack.config.js to influence manager

[nowells]

Describe the bug
@storybook/core@4.1.0 broke (<= 4.0.12 worked) the ability for .storybook/webpack.config.js to contribute to the manager webpack bundle. This is important to us, as we have addons that rely on webpack features that we need to configure, this worked in versions before 4.1.0, however, it appears that this behavior was removed at that time.

To Reproduce
Attempt to use a feature in your .storybook/addon.js that your webpack.config.js enables.

Expected behavior
I should be able to use features and settings in the manager bundle from the custom webpack.config.js

[ndelangen]

@nowells I didn't expect people would need to modify the webpack config for manager.

I was wrong.

There's a solution for you, which you can do right now:

• create a file inside your storybook folder: presets.js
• set it's contents to:

  module.exports = [
    path.resolve('./my-preset'),
  ];

• create a file inside your storybook folder: my-preset.js
• set it's contents to:

  export async function managerWebpack(baseConfig, options) {
    return baseConfig;
  }

This should modify the webpack config of the manager to your desire.

You can use this file to modify both configs at once:

export async function managerWebpack(baseConfig, options) {
  return baseConfig;
}
export async function managerBabel(baseConfig, options) {
  return baseConfig;
}
export async function webpack(baseConfig, options) {
  return baseConfig;
}
export async function babel(baseConfig, options) {
  return baseConfig;
}

We haven't really introduced this api to the world yet, but this should allow you to do what you want.

[nowells]

Thank @ndelangen thanks for getting back to me. I looked through the code and found the presets feature, however, it's definition in the code does not make me feel like it is something I would want to use: "Custom presets" is an experimental and undocumented feature that will be changed or deprecated soon. Use it on your own risk.

Also, this appears to be a breaking change from the published docs for v4, so it is unfortunate to have this land as a minor bump. We have tons of projects at our company that would need to be updated, which we can certainly do, but unfortunate to have to coordinate either pinning to 4.0.12 or doing a change like the presets one (which from the code it appears that we would need to change again since it is not stable).

It seems to me that restoring the webpack.config.js behavior would be the most ideal situation, as it is valuable, and important in a consistent ecosystem of adding code to both the iframe and manager, and not just the iframe.

Thanks for your time and consideration of this issue.

[lflpowell]

@ndelangen I tried your solution and got:

(function (exports, require, module, __filename, __dirname) { export async function managerWebpack(baseConfig, options) {
ERR!                                                               ^^^^^^
ERR!
ERR! SyntaxError: Unexpected token export

[nowells]

@ndelangen any guidance on my question above (sorry, not trying to push), we have pinned to 4.0.12 internally for now, but would like to understand a stable path forward.

[shilman]

@nowells Sorry for the inconvenience here. We'll try to get it sorted ASAP. First, a question: do you need a custom webpack config or if we added back in a bunch of standard loaders would that solve your problem in the short term? (The current manager config is pretty stripped down, but doesn't need to be.)

@igor-dv At what point can we call the presets API stable? I think this is a pretty good use case for it--I don't see us going back to a unified config, and it looks like people are relying on being able to configure the manager too. See also #5004

[DBosley]

@lflpowell: I was able to get it working with this:

module.exports = {
  async managerWebpack(baseConfig, options) {
    return baseConfig;
  }
};

[nowells]

@shilman we need a custom webpack config in our workflow, we need to run our own plugins to make storybooks work in our ecosystem. At the very least adding back in the standard loaders might help (such as JSX) however, I think having the ability to customize just like the preview is pretty powerful and useful for more advanced cases.

[Laskoran]

@shilman since this also broke our storybook usage that is based on CRA (so not having any additional webpack config) we would be very happy if standard loaders would work out of the box when compiling the manager. We have e.g. an addon that now breaks the compile process since it is loading png files (or rather failing to import them now).