Skip to content

Migrate Storybook from Webpack 5 to Vite builder#797

Draft
Copilot wants to merge 3 commits intomainfrom
copilot/update-storybook-to-use-vite
Draft

Migrate Storybook from Webpack 5 to Vite builder#797
Copilot wants to merge 3 commits intomainfrom
copilot/update-storybook-to-use-vite

Conversation

Copy link

Copilot AI commented Feb 10, 2026

  • Update docs/storybook/.storybook/main.ts - Change framework from @storybook/react-webpack5 to @storybook/react-vite, replace webpackFinal with viteFinal, remove webpack babel compiler addon
  • Update docs/storybook/.storybook/preview.ts - Change Preview type import to @storybook/react-vite
  • Update all 11 story files - Change Meta/StoryObj imports from @storybook/react-webpack5 to @storybook/react-vite
  • Update root package.json - Add @storybook/react-vite, remove @storybook/react-webpack5 and @storybook/addon-webpack5-compiler-babel, bump storybook versions to ^10.2.7 for peer dep compatibility
  • Update docs/storybook/BUILD (Bazel) - Replace webpack references with Vite, remove webpack loaders (ts-loader, raw-loader) and babel config from deps
  • Replace !!raw-loader! webpack syntax with Vite ?raw suffix in all story files
  • Fix @player-ui/storybook tsup build - externalize Node.js builtins for platform: "neutral"
  • Add @storybook/global dependency (needed by bundled @vueless/storybook-dark-mode)
  • Run pnpm install to update lockfile
  • Verify Storybook build succeeds with Vite (manager + preview both built successfully)
  • Run code review and CodeQL checks (no issues found)
Original prompt

This section details on the original issue you should resolve

<issue_title>Update Storybook to Use Vite</issue_title>
<issue_description>Currently out Storybook uses the Webpack 5 builder but with industry trends moving away from Webpack we should look into using the Vite builder for storybook. </issue_description>

Comments on the Issue (you are @copilot in this section)


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

- Update framework from @storybook/react-webpack5 to @storybook/react-vite
- Replace webpackFinal with viteFinal in main.ts config
- Remove @storybook/addon-webpack5-compiler-babel addon
- Update all story file imports to use @storybook/react-vite
- Update Bazel BUILD file to reference Vite packages
- Bump storybook packages to ^10.2.7 for peer dep compatibility
- Remove babel.config.json and webpack loader deps from BUILD

Co-authored-by: adierkens <13004162+adierkens@users.noreply.github.com>
Copilot AI changed the title [WIP] Update Storybook to use Vite builder Migrate Storybook from Webpack 5 to Vite builder Feb 10, 2026
Copilot AI requested a review from adierkens February 10, 2026 06:59
… builtins, add @storybook/global

- Replace webpack !!raw-loader! prefix with Vite ?raw suffix in all story files
- Add node:module builtinModules to tsup external config for @player-ui/storybook
- Add @storybook/global dependency (needed by @vueless/storybook-dark-mode bundled in addon)

Co-authored-by: adierkens <13004162+adierkens@users.noreply.github.com>
@codecov
Copy link

codecov bot commented Feb 11, 2026

Bundle Report

Changes will increase total bundle size by 1.89kB (0.03%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
plugins/shared-constants/core 7.32kB 1.89kB (34.72%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: plugins/shared-constants/core

Assets Changed:

Asset Name Size Change Total Size Change (%)
index.legacy-esm.js 1.89kB 1.89kB 100.0% ⚠️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Update Storybook to Use Vite

2 participants