storybook setup

Question

node -v : 24 vite react.ts storybook 10v --- storybook setup 하고 난 이후 react-vite npm run dev를 실행하니 Failed to load preset: "@storybook/preset.js"■ Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@storybook/preset.js' │ imported from ./node_modules/storybook/dist/_node-chunks/chunk-O7UZQAUS.js │ at Object.getPackageJSONURL (node:internal/modules/package_json_reader:255:9) │ at packageResolve (node:internal/modules/esm/resolve:767:81) │ at moduleResolve (node:internal/modules/esm/resolve:853:18) │ at defaultResolve (node:internal/modules/esm/resolve:983:11) │ at nextResolve (node:internal/modules/esm/hooks:748:28) │ at o (file://./node_modules/@tailwindcss/node/dist/esm-cache.loader.mjs:1:69) │ at nextResolve (node:internal/modules/esm/hooks:748:28) │ at Hooks.resolve (node:internal/modules/esm/hooks:240:30) │ at handleMessage (node:internal/modules/esm/worker:199:24) │ at Immediate.checkForMessages (node:internal/modules/esm/worker:141:28) 이런 에러가 뜹니다. .storybook/main.ts 는 import type { StorybookConfig } from "@storybook/react-vite"; const config: StorybookConfig = { stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], addons: [ "@chromatic-com/storybook", "@storybook/addon-vitest", "@storybook/addon-a11y", "@storybook/addon-docs", "@storybook/addon-onboarding", ], framework: "@storybook/react-vite", core: { builder: "@storybook/builder-vite", // 👈 The builder enabled here. }, }; export default config; 이렇게 설정해 놓았고, npm install @storybook/builder-vite --save-dev 해놓은 상태입니다. 이유를 찾고싶은데 못찾아 qa 남깁니다.

Coi · Answer

버전 10.1 이상 부턴 npm create storybook@latest 설치하면 자동적으로 storybook builder 가 설치가 되나보내요 저는 강의 영상에서 builder 설치를 하길래 npm install @storybook/builder-vite --save-dev 설치 후 core: { builder: '@storybook/builder-vite', // 👈 The builder enabled here. }, 이걸 추가해줬어서 해당 에러가 났었네요

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. 최문길 님의 질문에 대한 답변을 드리겠습니다. 스토리북 설정 후 react-vite 를 실행할 때 발생하는 에러는 주로 패키지 설치나 설정 파일의 문제에서 기인할 수 있습니다. @storybook/preset.js 관련 오류 메시지로 보건대, 몇 가지 점검할 부분을 제안드립니다. 패키지 설치 확인 : @storybook/react-vite 와 관련된 패키지들이 제대로 설치되어 있는지 확인하세요. 아래 명령어로 패키지를 다시 설치해보는 것을 권장합니다. npm install @storybook/builder-vite @storybook/react-vite --save-dev addon 및 preset 확인 : 설정 파일에 지정된 addon들이 실제로 설치되어 있는지 점검하세요. @storybook/addon-vitest 등 모든 addon을 명시적으로 설치했는지 확인이 필요합니다. 설정 파일 구성 확인 : .storybook/main.ts 파일의 구성이 올바른지 재확인하세요. 특히, 불필요한 @chromatic-com/storybook 이라는 addon을 사용하고 있을 가능성이 있습니다. 일반적으로, chromatic을 사용할 때는 다른 방식으로 설정해야 합니다. Node 버전 호환성 검토 : 현재 사용 중인 Node 버전이 Storybook과 다른 npm 패키지들과 호환되는지 확인하세요. Node의 최신 버전에서는 일부 패키지가 완전히 호환되지 않을 수 있습니다. 경우에 따라 Node의 이전 버전(예: 16.x, 18.x)으로 낮추는 것을 효과적일 수 있습니다. 빌드 도구 확인 : vite 가 제대로 구성되어 있는지도 점검하세요. Storybook과 Vite의 설정들이 올바르게 연결되어 있는지를 재확인하시기 바랍니다. 이러한 점검 후에도 문제가 해결되지 않는다면, 구체적인 파일 경로나 추가 로그 정보를 참고로 더 세부적인 디버깅이 필요할 수 있습니다. 아래 링크는 비슷한 문제를 제기한 사례와 해결책이 담긴 페이지입니다. react-toastify 를 storybook에 출력 시키기 index.tsx 빌드 오류 위 답변이 도움이 되길 바라며, 추가적인 문제가 발생하거나 궁금한 점이 있으면 언제든지 질문해 주세요. 곧 지식공유자께서도 도움을 주실 것입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.