Storybook "framework field ... is required" (SB6 to 7/8 migration) in CI

By Kaveh Alemi·Latchkey

Storybook 7 and 8 replaced the separate builder and framework addons with a single framework field that names a framework package. A config carried over from Storybook 6 without it fails because the field is now required.

What this error means

After upgrading, the build fails with "Error: You must specify a framework in '.storybook/main.js'" or "framework field in main.js is required".

Error: You must specify a framework in '.storybook/main.js', for example:

  export default { framework: '@storybook/react-vite' };

Common causes

A Storybook 6 config missing the framework field

Version 6 configured the framework through addons and a core.builder; version 7/8 requires an explicit framework package, which the migrated config lacks.

The framework package is not installed

The framework name is set but its package (for example @storybook/react-vite) was never added, so it cannot resolve.

How to fix it

Add the framework field and package

1. Choose the framework package that matches your renderer and builder.
2. Install it and set framework in .storybook/main.ts.
3. Remove the legacy core.builder and framework addons.

// .storybook/main.ts
export default {
  stories: ['../src/**/*.stories.@(ts|tsx)'],
  framework: { name: '@storybook/react-vite', options: {} },
};

Run the automigrate command

Storybook can apply the framework migration automatically; run it and commit the result.

npx storybook@latest automigrate

How to prevent it

• Run storybook automigrate as part of every major upgrade.
• Install the framework package alongside setting the framework field.
• Build Storybook in CI on a branch before merging an upgrade.

Frequently asked questions

Related guides

References

• GitHub Actions documentation