storybook: Cannot get /iframe.html

I ran into this issue as well after migrating from extend mode to full control mode. Fixed it by changing the config.plugins option from

config.plugins = [
  ...
]

to

config.plugins.push(
  ...
)

It may be worth updating the docs at https://storybook.js.org/docs/configurations/custom-webpack-config/#full-control-mode to preserve the plugins config array as well

@yairEO @lauterry Yeah well, you’re both REMOVING all webpack plugins, including the HtmlWebpackplugin, so it would make sense for there to be no html outputted.

For me the problem was that the output path was the same as the configuration path. Storybook clears the output path before build.

@ndelangen - Thanks! you saved me.

I wasn’t aware there were any default plugins in the first place! who knew…

// webpack.config.js
module.exports = async ({ config }) => {
  config.plugins.push(new TestWebpackPlugin());
  return config;
};

// test.webpack.plugins.js
const pluginName = 'DefWebpackPlugin';
class TestPlugin {
  constructor() {

  }

  apply(compiler) {
    compiler.hooks.compilation.tap(pluginName,(compilation) => {
      // Q => ?????????????????????????
      // why 'compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing' awlays is undefined
      if (!compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing) return;
      compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap(pluginName, (data, callback) => {
        // do something
        callback && callback(null, data);
      });
    });
  }
}

module.exports = TestPlugin;

In my case webpack.config.js had a line config.output.publicPath = '/storybook/'; but /storybook didn’t exist. Removing that line fixed the problem.

For me this turned out to be a path issue - the git repo created a folder called Design%20System - removing the encoded space to just DesignSystem fixed this for me.