Comments (8)
@byunghyun what package manager/version are you using? does it work in node 20? do you have a reproduction repo you can share?
from storybook.
@byunghyun어떤 패키지 관리자/버전을 사용하고 있습니까? 노드 20에서 작동합니까? 공유할 수 있는 재생산 저장소가 있나요?
I'm using npm.
node version 21
from storybook.
@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.
from storybook.
@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": "[email protected]"
}
from storybook.
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?
from storybook.
@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.
from storybook.
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.
from storybook.
Thank you, I solved the problem.
from storybook.
Related Issues (20)
- Add beforeAll hook to Storybook
- [Bug]: fast refresh is very slow when using `react-docgen-typescript` since `v8.1.0` HOT 2
- [Bug]: Show missing `vite.config.js` file in migration notification while the `vite.config.ts` exists HOT 4
- [Bug]: Unable to Mock Modules in Storybook HOT 3
- [Bug]: a11y-addon - APCA Contrast check - Can't pass custom evaluate function to rule
- [Bug]: Package exports are not properly interpreted in a mono-repo setup
- [Bug]: Unable to add storybook to existing nextjs project HOT 3
- [Bug]: previewMainTemplate Option Ignored, Default Template Used Instead
- [Bug]: RollupError: "createRequire" is not exported by "__vite-browser-external" HOT 1
- [Bug]: Small visual bug in Controls UI loading state HOT 1
- [Bug]: tocbot dependency causing `ERR_REQUIRE_ESM` error on `next dev` and `next build` HOT 6
- [Documentation]: <Source> format prop incorrectly states it takes in BuiltInParserName
- [Bug]: theme not working in decorators HOT 1
- Upgrade to Node 20 in dev
- [Bug]: "useArgs" hook updates wrong story when rendered in "Stories" block HOT 1
- [Bug]: Can't build storybook after setCustomElementsManifest HOT 1
- [Bug]: Storybook angular custom source preview broken because of Prettier Angular praser is enforced
- [Bug]: Failed to resolve import
- [Bug]: StoryBook + NextJS based NPM is not working
- [Bug]: webpack-dev-middleware Error: ENOENT: no such file or directory on Windows
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from storybook.