storybook: fails to install on ubuntu, pnpm@latest, typescript@beta, react@18.1, webpack@latest ?

Describe the bug

pnpx sb init - fails no error, just hangs

pnpx sb init --type react: fails with the following error

 • Installing Storybook for user specified project type: react. ✓
 • Adding Storybook support to your "React" app(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠼ reify: timing ar
npm ERR! Cannot read properties of null (reading 'matches')

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/poop/.npm/_logs/2022-05-01T18_29_55_012Z-debug-0.log
An error occurred while installing dependencies.

pnpx sb init --type webpack_react: fails

poop@spaceship:~/git/foss/uiproto
02:44 PM (develop=) 
$ pnpx sb init --type webpack_react
✔ Install the following package: sb@latest? (Y/n) · true
 WARN  deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
 WARN  deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
 WARN  deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
 WARN  deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
 WARN  deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
 WARN  deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
 WARN  deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
Packages: +855
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /home/poop/.pnpm-store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 858, reused 856, downloaded 0, added 855, done
node_modules/.pnpm/core-js@3.22.3/node_modules/core-js: Running postinstall script, done in 53ms

/home/poop/.pnpm-store/v3/tmp/_npx/1078092/5:
+ sb 6.4.22

 WARN  Issues with peer dependencies found
.
└─┬ sb
  └─┬ @storybook/cli
    ├── ✕ missing peer jest@"*"
    └─┬ @storybook/core-common
      ├── ✕ missing peer typescript@"*"
      ├── ✕ missing peer react@"^16.8.0 || ^17.0.0"
      ├── ✕ missing peer react-dom@"^16.8.0 || ^17.0.0"
      └─┬ fork-ts-checker-webpack-plugin
        └── ✕ missing peer typescript@">= 2.7"
Peer dependencies that should be installed:
  jest@"*"                        react@"^16.8.0 || ^17.0.0"      
  react-dom@"^16.8.0 || ^17.0.0"  typescript@>=2.7.0              

 sb init - the simplest way to add a Storybook to your project. 

 • Installing Storybook for user specified project type: webpack_react. ✓
 • Adding Storybook support to your "Webpack React" app. ✓
 • Preparing to install dependencies. ✓


 • Installing dependencies(⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠼ reify: timing arborist:ctor Completed(#⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂⠂) ⠴ idealTree:at-least-node: timing idealTree:node_modules/.pnpm/at-least-node@1.0.0/node_modules/at-least-node Completed in

fails:
8250 error Cannot read properties of null (reading 'matches')

To Reproduce Please create a reproduction by running npx sb@next repro and following the instructions. Read our documentation to learn more about creating reproductions. Paste your repository and deployed reproduction here. We prioritize issues with reproductions over those without.

will extract the basics of a my typescript project into a repo shortly after creating this issue

repository with issue: https://github.com/noahehall/uiproto

System Please paste the results of npx sb@next info here.

Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /home/poop/.pnpm-store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 860, reused 849, downloaded 9, added 857, done
node_modules/.pnpm/core-js@3.22.3/node_modules/core-js: Running postinstall script, done in 53ms

/home/poop/.pnpm-store/v3/tmp/_npx/998267/5:
+ sb 6.5.0-beta.1

 WARN  Issues with peer dependencies found
.
└─┬ sb
  └─┬ @storybook/cli
    ├── ✕ missing peer jest@"*"
    └─┬ @storybook/core-common
      ├── ✕ missing peer typescript@"*"
      ├── ✕ missing peer react@"^16.8.0 || ^17.0.0 || ^18.0.0"
      ├── ✕ missing peer react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0"
      └─┬ fork-ts-checker-webpack-plugin
        └── ✕ missing peer typescript@">= 2.7"
Peer dependencies that should be installed:
  jest@"*"
  react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0"
  react@"^16.8.0 || ^17.0.0 || ^18.0.0"
  typescript@>=2.7.0

Environment Info:

  System:
    OS: Linux 5.13 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (12) x64 Intel(R) Core(TM) i7-10850H CPU @ 2.70GHz
  Binaries:
    Node: 18.0.0 - ~/.nvm/versions/node/v18.0.0/bin/node
    npm: 8.6.0 - ~/.nvm/versions/node/v18.0.0/bin/npm
  Browsers:
    Firefox: 99.0

Additional context

morbius is the worse movie ever made

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 21
Comments: 38 (14 by maintainers)

Most upvoted comments

WOW！！！ I solved this problem！！！

Try this！！！

# Remove workspace dependencies. ()
rm -rf ./node_modules
rm -rf ./pnpm-lock.yaml

# Remove packages dependencies.
pnpm -r exec rm -rf ./node_modules

rm -rf $(pnpm store path)

pnpm dlx sb@latest upgrade 

# Convert package-lock.json to pnpm-lock.json
pnpm import

+18

dohooo on May 27, 2022

FYI: I try to use pnpx sb@next init and some file has been create (.storybook and examples) and still throw same problem

moonrailgun on May 6, 2022

Hi, I just resolved the same issue. Please follow the steps:

Remove the pnpm-lock.yaml and node_modules; pnpm store prune to clean store cache
pnpm config set auto-install-peers true to enable installing peer dependencies automatically later
Remove any dependency related to storybook such as typescript and react; while pnpx sb init will install those peer dependencies for you, if you install by yourself, there’s a chance storybook pop up an error occurred while installing dependencies
after installation, you’ll see storybook in the package.json, try pnpm run storybook

Note that I am using angular. Therefore, I installed "@storybook/angular": "^6.5.9" as a dev dependency before init the storybook. Please let me know if any issue occurs following the steps.

`package.json` after installation

``` { "name": "angular-design-system", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test", "docs:json": "compodoc -p ./tsconfig.json -e json -d .", "storybook": "npm run docs:json && start-storybook -p 6006", "build-storybook": "npm run docs:json && build-storybook" }, "private": true, "dependencies": { "@angular/animations": "~13.0.0", "@angular/common": "~13.0.0", "@angular/compiler": "~13.0.0", "@angular/core": "~13.0.0", "@angular/forms": "~13.0.0", "@angular/platform-browser": "~13.0.0", "@angular/platform-browser-dynamic": "~13.0.0", "@angular/router": "~13.0.0", "rxjs": "~7.4.0", "tslib": "^2.3.0", "zone.js": "~0.11.4" }, "devDependencies": { "@angular-devkit/architect": "^0.1400.5", "@angular-devkit/build-angular": "~13.0.3", "@angular/cli": "~13.0.3", "@angular/compiler-cli": "~13.0.0", "@babel/core": "^7.18.6", "@compodoc/compodoc": "^1.1.19", "@storybook/addon-actions": "^6.5.9", "@storybook/addon-essentials": "^6.5.9", "@storybook/addon-interactions": "^6.5.9", "@storybook/addon-links": "^6.5.9", "@storybook/angular": "^6.5.9", "@storybook/builder-webpack5": "^6.5.9", "@storybook/manager-webpack5": "^6.5.9", "@storybook/testing-library": "^0.0.13", "@types/jasmine": "~3.10.0", "@types/node": "^12.11.1", "babel-loader": "^8.2.5", "jasmine-core": "~3.10.0", "karma": "~6.3.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "~1.7.0" } } ```

EDIT: After several manual tests, I don’t recommend using pnpm to install the storybook. You might manage to do so by clean install npm packages and pnpm import to bring them to be managed by pnpm, but that’s a lot of work. Even if you succeed, you’ll encounter issues when using git and Github. My first issue after pnpm install is compodoc not being recognized by pnpm.

Issues may occur if your default package manager is pnpm. I tried to set it back to npm, and the project successfully install the storybook. Then, I uploaded the code to Github, cloned the code, and npm install again. Everything runs okay.

WodenWang820118 on Jul 9, 2022

thanks ,this error prevented our project from introducing storybook

SparkElf on Jun 17, 2022

@noahehall would you mind trying out the latest beta version of the cli, pnpx sb@next init? I’m wondering if the change to remove jest from peer dependencies helped at all.

it created a .storybook dir but failed to fully install



/home/poop/.pnpm-store/v3/tmp/_npx/260557/5:
+ sb 6.5.0-beta.8

 WARN  Issues with peer dependencies found
.
└─┬ sb
  └─┬ @storybook/cli
    └─┬ @storybook/core-common
      ├── ✕ missing peer typescript@"*"
      ├── ✕ missing peer react@"^16.8.0 || ^17.0.0 || ^18.0.0"
      ├── ✕ missing peer react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0"
      └─┬ fork-ts-checker-webpack-plugin
        └── ✕ missing peer typescript@">= 2.7"
Peer dependencies that should be installed:
  react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0"
  react@"^16.8.0 || ^17.0.0 || ^18.0.0"
  typescript@>=2.7.0

 sb init - the simplest way to add a Storybook to your project. 

 • Detecting project type. ✓






 • Adding Storybook support to your "Webpack React" app
npm ERR! Cannot read properties of null (reading 'matches')

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/poop/.npm/_logs/2022-05-12T10_12_04_855Z-debug-0.log
An error occurred while installing dependencies.

noahehall on May 12, 2022

A workaround that has solved the issue for at least one person is to install sb locally, (npm install --save-dev sb) and then npx sb to run it from the local project, rather than globally.

same error

$ pnpx sb init

 sb init - the simplest way to add a Storybook to your project. 

 • Detecting project type. ✓
 • Adding Storybook support to your "Webpack React" app. ✓
 • Preparing to install dependencies. ✓


npm ERR! Cannot read properties of null (reading 'matches')

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/poop/.npm/_logs/2022-05-12T10_15_26_987Z-debug-0.log
. ✖

     An error occurred while installing dependencies.

poop@spaceship:~/git/foss/uiproto
05:19 AM (test *%=)

noahehall on May 12, 2022

The latest alpha version of storybook 7 will now use pnpm to install your dependencies when you run npx sb@next init or npx sb@next upgrade. Would anyone here like to try it out and check whether that solves the error that you were getting before?

I try to use npx sb@next init in a next.js project.It doesn’t has any error.

but when i use pnpx sb init, the error that i were getting before still exist.

tohsaka888 on Oct 21, 2022