Installing Storybook for Vue project throws "npm ERR! Cannot read properties of null (reading 'matches')"

[CapedHero]

Describe the bug

When following the documentation for Vue, I cannot successfully install Storybook. This problem occurs exactly the same for either Vue 2 or Vue 3.

To Reproduce

Funnily enough, when I try to reproduce the error with npx sb@next repro, a different problem occurs. So let's split the reproduction steps into two branches.

How to reproduce the error manually

$ vue create my-vue3-app
# Pick either "Default ([Vue 3] babel, eslint)" OR "Default ([Vue 2] babel, eslint)".
# The choice does NOT matter, the final error is exactly the same

$ cd my-vue3-app

$ npx sb init
# Here it doesn't matter if we run the command without a vue versions arg or specifically
# with `--type vue` for Vue 2 or `--type vue` for Vue 3, as the version, from what I can see, 
# is determined correctly by Storybook.

...
# Now after some time, we got:
npm ERR! Cannot read properties of null (reading 'matches')

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/capedhero/.npm/_logs/2022-07-25T14_00_52_949Z-debug-0.log
npm ERR!     /Users/capedhero/.npm/_logs/2022-07-25T14_00_52_949Z-debug-1.log
An error occurred while installing dependencies.

# The debug logs have 55k lines of nothing interesting apart from the reported
# "npm ERR! Cannot read properties of null (reading 'matches')"
# in the very last part.

What's the result of trying to reproduce the error with npx sb@next repro?

$ npx sb@next repro
✔ 🌈 Select the repro framework › vue3
✔ 📝 Select the repro base template › vue3
✔ Enter the output directory … my-vue3-app

$ cd my-vue3-app

$ yarn storybook
info @storybook/vue3 v6.5.9
info
info => Loading presets
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Using default Webpack4 setup
(node:77826) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.

See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
(Use `node --trace-deprecation ...` to show where the warning was created)
ERR! TypeError: Cannot read properties of undefined (reading 'NormalModule')

System

Environment Info:

  System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 16.14.0 - ~/.asdf/installs/nodejs/16.14.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.3.1 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Safari: 15.5

[Saunved]

@CapedHero Do you face the same issue if you create the vue app using the command here https://vuejs.org/guide/quick-start.html#with-build-tools?
npm init vue@latest

I tried it with this command and storybook is getting installed correctly. I will try to reproduce with the vue CLI command in the meanwhile.

[Saunved]

I tried reproducing this on a Linux machine with the Vue cli command, but was not able to. Storybook got installed as expected and ran correctly.

Machine details:
Zorin OS (Ubuntu fork)
Node 16.16.0
Yarn 1.22.19
npm 8.11.0

I am wondering if it is possible that it's an issue with M1?

As for the npx sb@next repro error, I am able to reproduce it on the same machine.

[CapedHero]

@Saunved, thank you for such a fast reply 👍

Do you face the same issue if you create the vue app using the command here https://vuejs.org/guide/quick-start.html#with-build-tools?
npm init vue@latest

Hm, let's try:

$ npm init vue@latest
Need to install the following packages:
  create-vue@latest
Ok to proceed? (y) y

Vue.js - The Progressive JavaScript Framework

✔ Project name: … my-vue3-vite-app
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add Cypress for End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

$ cd my-vue3-vite-app

$ npm run dev
# The Vue app works with no errors.

$ npx sb init

$ npm run storybook
# ...and it worked!

So what struck me now is that I used pnpm in my own project. And indeed, when I switch the commands above with pnpm install and pnpm dlx sb init, then storybook init throws the very same error I described in this issue, i.e. npm ERR! Cannot read properties of null (reading 'matches').

Also, I tried:

$ npm init vue@latest
$ yarn install
$ npx storybook init
$ yarn storybook

...and it worked as well.

I can only assume that Vue + pnpm is simply not ready for Storybook, so I'll switch to yarn.

Thanks again for your help!

[IanVS]

This looks like it might be a duplicate of #18111.