Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Add section about missing vite config file to migration guides #26378

Merged
merged 4 commits into from
Mar 7, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions docs/migration-guide/from-older-version.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,16 @@
title: 'Migration guide from Storybook 6.x to 8.0'
---

Storybook 8 focuses on performance and stability.

- 💨 [2-4x faster test builds](/blog/optimize-storybook-7-6/#2-4x-faster-builds-with-thetest-flag), [25-50% faster React docgen](/blog/optimize-storybook-7-6/#22x-faster-react-docgen), and [SWC support for Webpack projects](/blog/optimize-storybook-7-6/#using-webpack-enable-swc)
- ✨ Improved framework support: you no longer need to install React as a peer dependency when using a non-React renderer
- 🌐 [Support for React Server Components (RSC)](/blog/storybook-react-server-components/): our experimental solution renders async RSC in the browser and mocks Node code
Storybook 8 focuses on improving performance, compatibility, and stability. Key features include:

- 🩻 A new visual testing workflow via [the Visual Tests addon](https://www.chromatic.com/docs/visual-tests-addon/)
- 💨 [2-4x faster test builds](https://storybook.js.org/blog/optimize-storybook-7-6/#2-4x-faster-builds-with-thetest-flag), [25-50% faster React docgen](https://storybook.js.org/blog/optimize-storybook-7-6/#22x-faster-react-docgen), and [SWC support for Webpack projects](https://storybook.js.org/blog/optimize-storybook-7-6/#using-webpack-enable-swc)
- 🧩 Improved framework support: you no longer need to install React as a peer dependency when using a non-React renderer
- 🎛️ Strengthened control generation in [React](https://storybook.js.org/blog/storybook-8-beta/#major-performance-improvements
) and [Vue](https://storybook.js.org/blog/first-class-vue-support-storybook-8/) projects
- ⚡️ Improved Vite architecture, Vitest testing, and Vite 5 support
- 🌐 [Support for React Server Components (RSC)](https://storybook.js.org/blog/storybook-react-server-components/): our experimental solution renders async RSC in the browser and mocks Node code
- ✨ A refreshed desktop UI & mobile UX
- ➕ Much, much more

This guide is meant to help you **upgrade from Storybook 6.x to 8.0** successfully!
Expand Down Expand Up @@ -79,6 +84,10 @@ If you are using the `storiesOf` API (which requires `storyStoreV7: false` in St

Storybook 8 uses MDX 3. If you're coming from MDX 1 (used by Storybook 6), there were significant breaking changes in MDX 2. Please reference our [guidance on upgrading successfully](../../release-7-6/docs/migration-guide.md#upgrade-mdx1-to-mdx2).

#### Missing `vite.config.js` file

If you are using Vite, you may now need to create a `vite.config.js` file in your project root to allow newer versions of Vite to work with Storybook. Additionally, you may need to install and configure a Vite plugin for your framework. More information is available in the [full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-specific-vite-plugins-have-to-be-explicitly-added).

## Troubleshooting

The automatic upgrade should get your Storybook into a working state. If you encounter an error running Storybook after upgrading, here’s what to do:
Expand Down
13 changes: 11 additions & 2 deletions docs/migration-guide/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,16 @@
title: 'Migration guide for Storybook 8.0'
---

Storybook 8 focuses on performance and stability.
Storybook 8 focuses on improving performance, compatibility, and stability. Key features include:

- 🩻 A new visual testing workflow via [the Visual Tests addon](https://www.chromatic.com/docs/visual-tests-addon/)
- 💨 [2-4x faster test builds](https://storybook.js.org/blog/optimize-storybook-7-6/#2-4x-faster-builds-with-thetest-flag), [25-50% faster React docgen](https://storybook.js.org/blog/optimize-storybook-7-6/#22x-faster-react-docgen), and [SWC support for Webpack projects](https://storybook.js.org/blog/optimize-storybook-7-6/#using-webpack-enable-swc)
- ✨ Improved framework support: you no longer need to install React as a peer dependency when using a non-React renderer
- 🧩 Improved framework support: you no longer need to install React as a peer dependency when using a non-React renderer
- 🎛️ Strengthened control generation in [React](https://storybook.js.org/blog/storybook-8-beta/#major-performance-improvements
) and [Vue](https://storybook.js.org/blog/first-class-vue-support-storybook-8/) projects
- ⚡️ Improved Vite architecture, Vitest testing, and Vite 5 support
- 🌐 [Support for React Server Components (RSC)](https://storybook.js.org/blog/storybook-react-server-components/): our experimental solution renders async RSC in the browser and mocks Node code
- ✨ A refreshed desktop UI & mobile UX
- ➕ Much, much more

This guide is meant to help you **upgrade from Storybook 7.x to 8.0** successfully!
Expand Down Expand Up @@ -79,6 +84,10 @@ If you have `storyStoreV7: false` in your `.storybook/main.js`, you will need to

If you are using the `storiesOf` API (which requires `storyStoreV7: false` in Storybook 7), you will need to either [migrate your stories to CSF](../../release-7-6/docs/migration-guide.md#storiesof-to-csf) or use the [new indexer API to continue creating stories dynamically](../../release-7-6/docs/migration-guide.md#storiesof-to-dynamically-created-stories).

#### Missing `vite.config.js` file

If you are using Vite, you may now need to create a `vite.config.js` file in your project root to allow newer versions of Vite to work with Storybook. Additionally, you may need to install and configure a Vite plugin for your framework. More information is available in the [full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-specific-vite-plugins-have-to-be-explicitly-added).

## New projects

To add Storybook to a project that isn’t currently using Storybook:
Expand Down
Loading