강의

멘토링

커뮤니티

Cộng đồng Hỏi & Đáp của Inflearn

Hình ảnh hồ sơ của mimk09059814
mimk09059814

câu hỏi đã được viết

Kiểm tra sách truyện và giao diện người dùng có thể được áp dụng trực tiếp vào thực hành

Thiết lập môi trường dự án trước buổi giảng

storybook setup

Đã giải quyết

Viết

·

53

0

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

reacttypescripttailwindcssstorybookui-testing

Câu trả lời 2

0

Coi님의 프로필 이미지
Coi
Người đặt câu hỏi

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

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

image.png
jasonkang님의 프로필 이미지
jasonkang
Người chia sẻ kiến thức

공유 감사합니다!

0

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

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

  1. 패키지 설치 확인: @storybook/react-vite와 관련된 패키지들이 제대로 설치되어 있는지 확인하세요. 아래 명령어로 패키지를 다시 설치해보는 것을 권장합니다.
   npm install @storybook/builder-vite @storybook/react-vite --save-dev
  1. addon 및 preset 확인: 설정 파일에 지정된 addon들이 실제로 설치되어 있는지 점검하세요. @storybook/addon-vitest 등 모든 addon을 명시적으로 설치했는지 확인이 필요합니다.

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

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

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

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

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

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

Hình ảnh hồ sơ của mimk09059814
mimk09059814

câu hỏi đã được viết

Đặt câu hỏi