Storybook webpack5 vs vite builder mismatch in CI

By Kaveh Alemi·Latchkey

In Storybook 7/8 the builder is bundled with the framework package: @storybook/react-vite uses Vite, @storybook/react-webpack5 uses webpack. If the framework name and the installed builder or webpack config disagree, the build cannot start.

What this error means

The build fails resolving the builder, or webpack-specific main.js options (webpackFinal) are ignored/error under a Vite framework, or "Cannot find module '@storybook/builder-vite'".

Error: Cannot find module '@storybook/builder-webpack5'
Required by framework '@storybook/react-webpack5'

Common causes

The framework package and builder do not match

The config sets @storybook/react-webpack5 but only the Vite builder is installed, or webpackFinal is used under a Vite framework.

Leftover builder config from a migration

A core.builder field or webpackFinal/viteFinal from the old setup contradicts the new framework package.

How to fix it

Pick one builder and align config to it

1. Decide Vite or webpack5 for your project.
2. Set framework to the matching package and install it.
3. Use viteFinal for Vite or webpackFinal for webpack5, not both.

// Vite path
npm install -D @storybook/react-vite@^8
// then framework: '@storybook/react-vite' and use viteFinal

Install the builder the framework expects

If you keep webpack5, install its framework and builder packages together at a matching version.

npm install -D @storybook/react-webpack5@^8

How to prevent it

• Choose one builder and keep framework, builder, and *Final hook consistent.
• Remove legacy core.builder after migrating to 7/8.
• Run a clean npm ci build in CI after changing the builder.

Frequently asked questions

Related guides

References

• GitHub Actions documentation