Since Webpack 5 was released there have been many problems migrating projects to use it, mainly because plugins were not up-to-date and tooling like Create React App or Storybook didn't catch up soon enough.

I have some time to experiment with an approach to actually run Storybook side by side with Webpack 5 because early in 2021 some plugins we were using got updated to support Webpack 5.

Storybook uses webpack package installed at root of node_modules thus it requires special treatment. NPM and Yarn both support installing packages by aliases:

yarn add webpack-5@npm:webpack@^5.21.2

This installs Webpack 5 under alias webpack-5 and now both versions of Webpack are available. My strategy was to let Storybook run with default webpack package which is v4 and reconfigure my app to use v5.

Unfortunately Webpack since v4 uses webpack-cli package under the hood which is hardcoded to point at webpack package. So instead of relying directly on /node_modules/.bin/webpack to build my project , which picks Webpack v4, I wrote a custom script where I simply copied over the contents of default Webpack binary, and prepended it with code to override webpack package:

const mock = require('mock-require');

mock('webpack', 'webpack-5');

// Contents below are copied over from /.node_modules/.bin/webpack
// ---------------------------------------------------------------

I based my solution on a simple package mock-require that has ability to override a package by name with a different package.

This proved to work correctly! Now I have a working Storybook and I don't need to wait for maintainers of that tool to catch up with Webpack 5.

My solution is barebones and for sure can be improved. But obviously this is a temporary situation that will be gone. This approach though might be helpful in the future with other packages/tools that could potentially block me from upgrading a common package.