[Bug]: Updating from 8.4.7 to 8.5.0 on a webpack setup does not work

[alebrozzo]

Describe the bug

I have a complex setup that uses Webpack 5.97, and we are using Storybook 8.4.7. I am trying to update to 8.5.0 but I get the following error:

Error: Cannot find module 'vitest-axe/matchers'
    at webpackMissingModule (http://localhost:6006/vendors-node_modules_storybook-addon-mock_dist_esm_preset_preview_js-node_modules_webpack-hot-585179.iframe.bundle.js:40770:50)
    at ./node_modules/@storybook/addon-a11y/dist/preview.mjs (http://localhost:6006/vendors-node_modules_storybook-addon-mock_dist_esm_preset_preview_js-node_modules_webpack-hot-585179.iframe.bundle.js:40770:144)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:332:21)
    at Vn.getProjectAnnotations (http://localhost:6006/main.iframe.bundle.js:370:978)
    at Vn.getProjectAnnotationsOrRenderError (http://localhost:6006/sb-preview/runtime.js:6163:26)
    at Vn.initialize (http://localhost:6006/sb-preview/runtime.js:6147:26)
    at new PreviewWithSelection (http://localhost:6006/sb-preview/runtime.js:6685:10)
    at new PreviewWeb (http://localhost:6006/sb-preview/runtime.js:7129:5)
    at ./storybook-config-entry.js (http://localhost:6006/main.iframe.bundle.js:385:41)

As I said, I am not using vitest but the latest version of webpack. I can see in my packge-lock file that vitest-axe is being installed as a dependency by @storybook/addon-a11y and I see it in my node_modules folder. I have tried manually adding thre reference with no change in the error. I have also tried with storybook v8.5.2 and with Webpack v5.96.
I tried to use AI to fix this and it suggested to set parameters.a11y.config.matcher to null in preview.ts, but that didn't fix the problem either.

I have now updated every other storybook addon to 8.5.2 and left a11y on 8.4.7 and I don't get the error.

Reproduction link

don't have one, the setup is too complex (and private)

Reproduction steps

It's OK if you close this, I find it odd that vitest is a non dev dependency of an addon though and perhaps that is enough of a hint to be able to fix?

System

Storybook Environment Info:

  System:
    OS: macOS 15.1.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.13.0 - ~/.nvm/versions/node/v22.13.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.6.0/bin/yarn
    npm: 10.9.2 - ~/.nvm/versions/node/v22.13.0/bin/npm <----- active
  Browsers:
    Chrome: 132.0.6834.111
    Safari: 18.1.1
  npmPackages:
    @storybook/addon-a11y: ^8.4.7 => 8.4.7 
    @storybook/addon-coverage: 1.0.5 => 1.0.5 
    @storybook/addon-essentials: 8.5.2 => 8.5.2 
    @storybook/addon-interactions: ^8.5.2 => 8.5.2 
    @storybook/addon-links: ^8.5.2 => 8.5.2 
    @storybook/addon-webpack5-compiler-babel: 3.0.5 => 3.0.5 
    @storybook/core-events: ^8.5.2 => 8.5.2 
    @storybook/react: ^8.5.2 => 8.5.2 
    @storybook/react-webpack5: ^8.5.2 => 8.5.2 
    @storybook/test: 8.5.2 => 8.5.2 
    @storybook/test-runner: ^0.19.1 => 0.19.1 
    eslint-plugin-storybook: ^0.11.1 => 0.11.1 
    storybook: ^8.5.2 => 8.5.2 
    storybook-addon-mock: ^5.0.0 => 5.0.0

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This is a known issue with @storybook/addon-a11y v8.5.0+ requiring vitest-axe as a dependency. To resolve: 1. Either keep @storybook/addon-a11y at v8.4.7 until this is fixed 2. Or add vitest-axe as a direct dependency: bash npm install --save-dev vitest-axe The dependency issue is tracked in the addon-a11y package.json where vitest-axe was moved from devDependencies to dependencies. This will be addressed in a future release.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile

[alebrozzo]

It seems this may be an issue with test-runner: storybookjs/test-runner#536

[shilman]

@valentinpalkovic @kasperpeulen I think we should handle this ourselves instead:

https://github.com/storybookjs/storybook/blob/next/code/addons/a11y/src/preview.tsx#L58

Or potentially prebundle vitest-axe instead. This is the underlying imlementation:

https://github.com/chaance/vitest-axe/blob/main/src/to-have-no-violations.ts