Ait init 후 개발서버 실행 문제

개발
,
1 
{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "granite dev",
    "build": "granite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "deploy": "ait deploy"
  },
  "dependencies": {
    "@apps-in-toss/web-framework": "^1.0.3",
    "@emotion/react": "^11.14.0",
    "@toss-design-system/mobile": "^2.1.0",
    "@toss-design-system/mobile-ait": "^2.1.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.33.0",
    "@types/react": "^19.1.10",
    "@types/react-dom": "^19.1.7",
    "@vitejs/plugin-react-swc": "^4.0.0",
    "eslint": "^9.33.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.3.0",
    "granite": "^0.14.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.39.1",
    "vite": "^7.1.2"
  }
}

Error Cannot destructure property ‘devServer’ of ‘config.pluginHooks’ as it is undefined.

  1. pnpm ait init 단계에서 appName을 앱인콘솔에서 등록했던 이름으로 설정이 불가능하여(하이픈(‘-’)이 빠져있다는 오류 발생.) 해당 init 완료 후 granite.config.ts의 appName을 변경하는 식으로 설정하였습니다. 해당 부분이 위 에러 발생의 원인일까요?
  2. package.json에서 "dev": "granite dev" → "dev": "vite" 로 변경 후, TDS의 TDSMobileAITProvider를 main.ts에 적용 후 개발환경에서 확인하려 하는데, Uncaught Error: deploymentId is not a constant handler 에러가 나고 있습니다. 혹시 해당 개발 환경 확인은 자체 localhost 환경에선 확인이 불가능한 구조인가요? 아니면 제가 설정을 뭔가 잘못한게 있을까요?
//main.ts

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
import { TDSMobileAITProvider } from "@toss-design-system/mobile-ait";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <TDSMobileAITProvider>
      <App />
    </TDSMobileAITProvider>
  </StrictMode>
);
2

안녕하세요 :slight_smile:

  1. Error Cannot destructure property ‘devServer’ of ‘config.pluginHooks’ as it is undefined.
    요 에러는 어느 시점에 나는 에러인가요 ?! vite 프로젝트 새로 초기화 후 서비스를 시작해도 해당 에러가 발생할까요?

  2. vite 프로젝트라면, package.json의 dev는 granite dev로 시도 부탁드려요! 서비스를 시작 하신 후, 샌드박스앱에서 접근하여 테스트해보시면 됩니다. 로컬호스트 브라우저에서는 동작하지 않는게 맞아요 :slight_smile:
    테스트앱(샌드박스) | 앱인토스 개발자센터

3 
//package.json

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "granite dev",
    "build": "granite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "deploy": "ait deploy"
  },
  "dependencies": {
    "@apps-in-toss/web-framework": "^1.0.3",
    "@emotion/react": "^11.14.0",
    "@toss-design-system/mobile": "^2.1.0",
    "@toss-design-system/mobile-ait": "^2.1.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.33.0",
    "@types/react": "^19.1.10",
    "@types/react-dom": "^19.1.7",
    "@vitejs/plugin-react-swc": "^4.0.0",
    "eslint": "^9.33.0",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.20",
    "globals": "^16.3.0",
    "granite": "^0.14.0",
    "typescript": "~5.8.3",
    "typescript-eslint": "^8.39.1",
    "vite": "^7.1.2"
  }
}

// granite.config.ts

import { defineConfig } from "@apps-in-toss/web-framework/config";

export default defineConfig({
  appName: {appName}, // ait init 당시, appName에 하이픈이 빠져있다는 에러로 init 후 수정하였습니다.
  brand: {
    displayName: "앱 이름", // 화면에 노출될 앱의 한글 이름으로 바꿔주세요.
    primaryColor: "#3182F6", // 화면에 노출될 앱의 기본 색상으로 바꿔주세요.
    icon: null, // 화면에 노출될 앱의 아이콘 이미지 주소로 바꿔주세요.
    bridgeColorMode: "basic",
  },
  web: {
    host: "localhost",
    port: 5173,
    commands: {
      dev: "vite",
      build: "vite build",
    },
  },
  permissions: [],
  outdir: "dist",
});
  1. 해당 설정 후 pnpm run dev 시 나타나고 있습니다.
4

pnpm install 후 다시 한번 시도 해봐주실 수 있나요 ?

5

해결했습니다 감사합니다!

1개의 좋아요