Skip to content

3588 upgrade storybook to v10 #4184

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.

Sign up for GitHub

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

Jump to bottom
Open
GCHQ-Developer-299 wants to merge 8 commits into
base: develop
Choose a base branch
from
Open

3588 upgrade storybook to v10 #4184

GCHQ-Developer-299 wants to merge 8 commits into from
+23,427 −36,815

Conversation

@GCHQ-Developer-299
Copy link
Contributor

@GCHQ-Developer-299 GCHQ-Developer-299 commented Jan 14, 2026 •
edited
Loading

Summary of the changes

Putting up as a draft initially, i've been very cautious with commits too.

I've been using the npx storybook@[VERSION] upgrade command. Very helpful.

Steps required to get web-components to work with storybook 10:

  • Update postcss (and eventually remove postcss plugin for storybook) which will eventually mean we can remove a CVE :)
  • Update WC-Storybook to use vite instead of webpack. Removed webpack from package.
  • Upgrade storybook to v9, it did a number of refactors to stories.
  • Convert storybook/main.js to use ESM instead of CommonJS syntax
  • Upgrade storybook to latest (10.1.11)
  • Removed eslint-plugin-storybook (added by the upgrade) as it was going to require us to move our eslintrc.js -> eslint.config.js and change the syntax. Maybe that change is due one day anyways, we'll see

I also had to update our eslint version (related storybook moving to ESM?) from v8.x to v9.x which involved:

  • replacing .eslintrc.js with eslint.config.json. This was partly done via npx @eslint/migrate-config .eslintrc.json but required a lot of manual work
  • updating the plugins (typescript, sonar, etc.)
  • adding a couple of rule exceptions, as new failures were appearing (i'm assuming old versions of the plugins didn't have these rules?). TODO: create a ticket to address those failures?
  • commenting out a couple of rules that eslint claimed didn't exist. Might be something I can go back and readdress

For react and canary-react:

  • i've had to remove storybook-addon-performance because it was last updated two years ago and incompatible with v9
  • Replacing webpack with vite meant that storybook noticed we had JSX inside .js files, so i've had to update preview.js and all the .stories.js files to jsx. It's purely a name change.
  • I removed not just webpack from react's package.json but the cli and dev-server which we don't use. I checked and cypress still runs, it installs webpack as a dependency.

Nextjs:

  • Nextjs didn't run for me before the upgrade. Now it does run, but none of the styles work. Still a win?

Followon tickets?

  • Find new performance plugin
  • Fix nextjs properly - or do I do that in this PR?

Related issue

#3588

@github-actions
Copy link
Contributor

github-actions bot commented Jan 14, 2026 •
edited by GCHQ-Developer-299
Loading

View your branch deployment here: https://mi6.github.io/ic-ui-kit/branches/3588-upgrade-storybook-v9-at-least/web-components
View your React branch deployment here: https://mi6.github.io/ic-ui-kit/branches/3588-upgrade-storybook-v9-at-least/react

Canary Web Components: https://mi6.github.io/ic-ui-kit/branches/3588-upgrade-storybook-v9-at-least/canary-web-components/
Canary React: https://mi6.github.io/ic-ui-kit/branches/3588-upgrade-storybook-v9-at-least/canary-react/

@evenstensberg
Copy link
Contributor

evenstensberg commented Jan 14, 2026

@GCHQ-Developer-299 is there any way for the team to continue using webpack? I’m a maintainer and am able to assist you with issues related to bundling/browser compatibility

@GCHQ-Developer-299
Copy link
Contributor Author

GCHQ-Developer-299 commented Jan 15, 2026

@GCHQ-Developer-299 is there any way for the team to continue using webpack? I’m a maintainer and am able to assist you with issues related to bundling/browser compatibility

@evenstensberg the migration guide states that Storybook dropped Webpack back in V9

@GCHQ-Developer-299 GCHQ-Developer-299 force-pushed the 3588-upgrade-storybook-v9-at-least branch 2 times, most recently from e9c7423 to f5482ef Compare January 15, 2026 14:17
@GCHQ-Developer-299 GCHQ-Developer-299 changed the title 3588 upgrade storybook v9 at least 3588 upgrade storybook to v10 Jan 15, 2026
evenstensberg
evenstensberg reviewed Jan 15, 2026
View reviewed changes
@github-actions
Copy link
Contributor

github-actions bot commented Jan 15, 2026

Cypress visual tests failed.
View the image diff here: https://github.com/mi6/ic-ui-kit/tree/gh-pages/branches/3588-upgrade-storybook-v9-at-least/cypress-image-diff-screenshots/diff
View the html report here: https://mi6.github.io/ic-ui-kit/branches/3588-upgrade-storybook-v9-at-least/cypress-image-diff-html-report/cypress-image-diff-html-report.html

@GCHQ-Developer-299 GCHQ-Developer-299 force-pushed the 3588-upgrade-storybook-v9-at-least branch 7 times, most recently from fe6deec to 2037205 Compare January 23, 2026 12:51
@GCHQ-Developer-299 GCHQ-Developer-299 marked this pull request as ready for review January 23, 2026 14:11
@GCHQ-Developer-299 GCHQ-Developer-299 force-pushed the 3588-upgrade-storybook-v9-at-least branch from 2037205 to a0a65d8 Compare January 29, 2026 08:48
@GCHQ-Developer-299
chore(web-components): Upgrade web-components storybook to v10.1.11
5209247 
Update storybook from version 8 to 10
refactor main.js -> main.mjs and convert it to ESM format as CommonJS is deprecated
move wc storybook from webpack to vite runner
@GCHQ-Developer-299
chore(root): update to latest eslint, refactor eslint config
ceb45be 
Updated to version 9.39.2 of eslint, which required updating syntax of config file (now called
eslint.config.js)

Some rules had to be disabled due to new failures
@GCHQ-Developer-299
build(web-components): point web-components package at new eslint con…
a1d7b99 
…fig file
@GCHQ-Developer-299
build(canary-web-components): point canary-web-components package at …
e14a353 
…new eslint config file
@GCHQ-Developer-299
chore(canary-web-components): upgrade canary-web-components to storyb…
4376082 
…ook v10.1.11

ref #3588
@GCHQ-Developer-299
chore(react): upgrade react to storybook 10.1.11
7b5952c 
Removed storybook-addon-performance plugin which is not supported by storybook 9+
Replace webpack with vite
update types/node package version
change filetype of all files containing jsx from js to jsx
remove webpack packages from package

ref 3588
@GCHQ-Developer-299
chore(canary-react): upgrade canary-react to storybook v10
4ce74be 
upgrade canary-react to storybook v10.1.11, along with the same refactors as required in react
package
@GCHQ-Developer-299
chore(nextjs): upgrade nextjs to storybook 10.1.11
743fcd6 
Upgrade package versions, convert main and preview files

ref 3588
@GCHQ-Developer-299 GCHQ-Developer-299 force-pushed the 3588-upgrade-storybook-v9-at-least branch from a0a65d8 to 743fcd6 Compare January 29, 2026 10:29
@lz405
Copy link
Contributor

lz405 commented Jan 29, 2026

image

Breaks when running 'start-storybook' on Ubuntu

The linked issue npm/cli#4828 seems to be a dead link

@evenstensberg
Copy link
Contributor

evenstensberg commented Jan 29, 2026

https://stackoverflow.com/a/77912508

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

Reviewers

1 more reviewer

@evenstensberg evenstensberg evenstensberg left review comments

Reviewers whose approvals may not affect merge requirements

At least 2 approving reviews are required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@GCHQ-Developer-299 @evenstensberg @lz405