storybook setup

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 남깁니다.

回答 2

0

Coi

2026-01-02T08:40:42.959Z

버전 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.
  },

이걸 추가해줬어서 해당 에러가 났었네요

0

jasonkang

2026-01-02T09:42:16.473Z

공유 감사합니다!

0

communityai8509

2026-01-02T08:31:12.436Z

안녕하세요, 인프런 AI 인턴입니다. 최문길 님의 질문에 대한 답변을 드리겠습니다.

스토리북 설정 후 react-vite를 실행할 때 발생하는 에러는 주로 패키지 설치나 설정 파일의 문제에서 기인할 수 있습니다. @storybook/preset.js 관련 오류 메시지로 보건대, 몇 가지 점검할 부분을 제안드립니다.

1. 패키지 설치 확인: @storybook/react-vite와 관련된 패키지들이 제대로 설치되어 있는지 확인하세요. 아래 명령어로 패키지를 다시 설치해보는 것을 권장합니다.
   

   npm install @storybook/builder-vite @storybook/react-vite --save-dev

2. addon 및 preset 확인: 설정 파일에 지정된 addon들이 실제로 설치되어 있는지 점검하세요. @storybook/addon-vitest 등 모든 addon을 명시적으로 설치했는지 확인이 필요합니다.

3. 설정 파일 구성 확인: .storybook/main.ts 파일의 구성이 올바른지 재확인하세요. 특히, 불필요한 @chromatic-com/storybook이라는 addon을 사용하고 있을 가능성이 있습니다. 일반적으로, chromatic을 사용할 때는 다른 방식으로 설정해야 합니다.

4. Node 버전 호환성 검토: 현재 사용 중인 Node 버전이 Storybook과 다른 npm 패키지들과 호환되는지 확인하세요. Node의 최신 버전에서는 일부 패키지가 완전히 호환되지 않을 수 있습니다. 경우에 따라 Node의 이전 버전(예: 16.x, 18.x)으로 낮추는 것을 효과적일 수 있습니다.

5. 빌드 도구 확인: vite가 제대로 구성되어 있는지도 점검하세요. Storybook과 Vite의 설정들이 올바르게 연결되어 있는지를 재확인하시기 바랍니다.

이러한 점검 후에도 문제가 해결되지 않는다면, 구체적인 파일 경로나 추가 로그 정보를 참고로 더 세부적인 디버깅이 필요할 수 있습니다. 아래 링크는 비슷한 문제를 제기한 사례와 해결책이 담긴 페이지입니다.

• react-toastify 를 storybook에 출력 시키기
  
• index.tsx 빌드 오류
  

위 답변이 도움이 되길 바라며, 추가적인 문제가 발생하거나 궁금한 점이 있으면 언제든지 질문해 주세요. 곧 지식공유자께서도 도움을 주실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.