[Bug]: I'll guide you through troubleshooting the issue with installing Storybook.

[byunghyun]

Describe the bug

I'll guide you through troubleshooting the issue with installing Storybook.

I'm sorry to hear that Storybook isn't installing or working properly even after running npx storybook@latest init. Let's troubleshoot this step by step.

node version: v21.7.1
nextjs version: v14.1.4

Reproduction link

my localhost

Reproduction steps

No response

System

error....

Additional context

No response

[shilman]

@byunghyun what package manager/version are you using? does it work in node 20? do you have a reproduction repo you can share?

[byunghyun]

@byunghyun어떤 패키지 관리자/버전을 사용하고 있습니까? 노드 20에서 작동합니까? 공유할 수 있는 재생산 저장소가 있나요?

I'm using npm.

node version 21

[byunghyun]

@byunghyun what package manager/version are you using? does it work in node 20? do you have a reproduction repo you can share?

Since this is a company project, I can't share the entire code. The error mentions something related to yarn pnp. I installed it with npx, but it shows an error related to yarn pnp.

[byunghyun]

@byunghyun what package manager/version are you using? does it work in node 20? do you have a reproduction repo you can share?

Just in case, I've also tried installing it with yarn, deleted all node_modules, and removed the package-lock file. I've tried all possible methods. Could it be related to Husky? If you request specific parts of the configuration files, I can send just those parts. Since this is a company project, I can't share the entire code.

{
"version": "0.1.0",
"private": true,
"scripts": {
....,
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"dependencies": {
"@apollo/client": "^3.9.10",
"@apollo/experimental-nextjs-app-support": "^0.10.1",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5",
"@hookform/resolvers": "^3.3.4",
"@material-tailwind/react": "^2.1.9",
"@mui/icons-material": "^5.15.18",
"@mui/material": "^5.15.14",
"@mui/x-date-pickers": "^7.3.2",
"@svgr/webpack": "^8.1.0",
"@types/braintree-web-drop-in": "^1.39.3",
"@types/jsonwebtoken": "^9.0.6",
"axios": "^1.7.2",
"bootstrap": "^5.3.3",
"braintree-web-drop-in": "^1.42.0",
"chart.js": "^4.4.2",
"classnames": "^2.5.1",
"concurrently": "^8.2.2",
"dayjs": "^1.11.11",
"env-cmd": "^10.1.0",
"file-saver": "^2.0.5",
"flowbite": "^2.3.0",
"flowbite-react": "^0.7.6",
"framer-motion": "^11.2.10",
"fuse.js": "^7.0.0",
"graphql": "^16.8.1",
"immer": "^10.1.1",
"jsonwebtoken": "^9.0.2",
"lodash": "^4.17.21",
"next": "14.1.4",
"next-auth": "^4.24.7",
"next-compose-plugins": "^2.2.1",
"preline": "^2.3.0",
"react": "^18",
"react-beautiful-dnd": "^13.1.1",
"react-bootstrap": "^2.10.2",
"react-chartjs-2": "^5.2.0",
"react-datepicker": "^6.9.0",
"react-daum-postcode": "^3.1.3",
"react-dom": "^18",
"react-hook-form": "^7.51.3",
"react-horizontal-scrolling-menu": "^7.0.0",
"react-infinite-scroller": "^1.2.6",
"react-lottie-player": "^2.0.0",
"react-modal": "^3.16.1",
"react-slick": "^0.30.2",
"react-spinners": "^0.13.8",
"react-swiper": "^0.1.5",
"react-toastify": "^10.0.5",
"react-use": "^17.5.0",
"react-virtuoso": "^4.7.11",
"react-window": "^1.8.10",
"recoil": "^0.7.7",
"sass": "^1.77.4",
"sharp": "^0.33.3",
"slick-carousel": "^1.8.1",
"swiper": "^11.1.3",
"ts-node": "^10.9.2",
"wait-on": "^7.2.0",
"xlsx": "^0.18.5",
"yup": "^1.4.0",
"zustand": "^4.5.2"
},
"devDependencies": {
"@graphql-codegen/cli": "^5.0.2",
"@graphql-codegen/typescript": "^4.0.7",
"@types/file-saver": "^2.0.7",
"@types/lodash": "^4.17.4",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-beautiful-dnd": "^13.1.8",
"@types/react-datepicker": "^6.2.0",
"@types/react-dom": "^18",
"@types/react-infinite-scroller": "^1.2.5",
"@types/react-modal": "^3.16.3",
"@types/react-slick": "^0.23.13",
"@types/react-window": "^1.8.8",
"@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.59.2",
"autoprefixer": "^10.4.19",
"eslint": "^8.57.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-next": "14.1.0",
"eslint-config-prettier": "^8.8.0",
"eslint-config-react-app": "^7.0.1",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-storybook": "^0.6.7",
"husky": "^8.0.0",
"lint-staged": "^15.2.5",
"next-pwa": "^5.6.0",
"postcss": "^8.4.38",
"prettier": "^2.8.7",
"tailwindcss": "^3.4.3",
"typescript": "^5"
},
"packageManager": "yarn@2.0.0-rc.30"
}

[byunghyun]

I just tried installing it on Windows OS instead of macOS, and it worked without any issues. Could it be related to the operating system?

[shilman]

@byunghyun is it possible that there is a yarn.lock file in a parent directory somewhere on your Mac? We use findUp to figure out which package manager to use in your project, and sometimes things get messed up when there are extra lockfiles laying around.

[TietoEvryMaterie]

I have a very similar issue, though I am on windows.

Storybook crashes on install into a clean vite react project with the following error: error An unexpected error occurred: "C:\\dev\\react\\storybook\\node_modules\\vite\\node_modules\\esbuild: Cannot find module 'pnpapi' . Note that I tested with several attempts with different project names, like fungus instead of storybook, with the same result.

I tried a few different ways of installing, and it seems to be yarn-related. When I created a new vite react project with npm, then used npm to install storybook as well, the install finally worked.

All separate projects I tested with were in the same containing folder, and no higher folders had a yarn.lock file.

[byunghyun]

Thank you, I solved the problem.