TDS Mobile 설치 후 granite dev 실행 시 “Cannot read properties of undefined (reading ‘commands’)” 에러 발생

개발
, ,
1

프로젝트 환경 설정을 완료하고 개발 서버(granite dev)를 실행하던 중,

TDS Mobile 패키지를 설치한 이후 아래와 같은 에러가 발생하여 문의드립니다.

:wrench: 진행한 작업

최신 TDS Mobile 컴포넌트를 프로젝트에 처음 추가하기 위해 아래 명령으로 관련 패키지들을 설치했습니다.

npm install @toss/tds-mobile @toss/tds-mobile-ait @emotion/react@^11 react@^18 react-dom@^18

TDS에서 요구하는 버전에 맞추기 위해

react-native 및 @apps-in-tossapps-in-toss/framework 등 주요 프레임워크 의존성도 함께 최신 버전으로 업데이트했습니다.

설치(npm install)는 정상적으로 완료되었으나,

이후 npm run dev (내부적으로 granite dev 실행) 명령어 수행 시 아래 에러가 발생합니다.

:warning: 에러 메시지

TypeError: Cannot read properties of undefined (reading ‘commands’)

at DevCommand.execute (file:///…/node_modules/@apps-in-toss/web-framework/dist/cli/index.js:68101:28)

at async DevCommand.validateAndExecute (file:///…/node_modules/@apps-in-toss/web-framework/dist/cli/index.js:56031:22)

at async _Cli.run (file:///…/node_modules/@apps-in-toss/web-framework/dist/cli/index.js:57056:18)

at async _Cli.runExit (file:///…/node_modules/@apps-in-toss/web-framework/dist/cli/index.js:57064:24)

:package: 주요 패키지 버전

react: 18.3.1

react-nati@apps-in-tosse: 0.76.7

@apps-in-@granite-jsoss/framework: ^1.2.0

@granite-js/*: 0.1.26 (통일)

:puzzle_piece: 시도해 본 해결 방법

  1. 의존성 클린 설치

    • node_modules, package-lock.json 삭제 후 npm install 재설치

  2. granite.config.ts 수정

    • 공식 예제를 참고하여 plugins 배열에 router() 추가

  3. 개발 도구 버전 통일

    • 모든 @granite-js/* 및 babel-preset-granite를 최신 버전(0.1.26)으로 통일

  4. 설정 파일 경로 점검

    • granite.config.ts의 icon 경로를 프로젝트 외부 참조 대신 임시 URL로 변경 테스트

:thought_balloon: 문의 내용

TDS 설치 후 granite dev 실행 시 위와 같은 에러가 반복 발생하고 있습니다.

혹시 비슷한 문제를 겪으신 분이나, 프레임워크/CLI 쪽 설정 관련 원인을 알고 계신 분이 있다면

도와주세유 ㅠㅠ

2

안녕하세요 :slight_smile:
react native 로 개발하고 계신가요 ?
RN은 npm install @toss/tds-react-native 로 TDS를 설치해주셔야해요 :man_bowing:

3

아 이걸로 하니까 빌드됐네요 감사합니다 ! 혹시 공식문서 링크가 있을까요? 제가 찾았는데 못찾은건가 싶어서요 ㅠㅠ

4

가이드 안내드립니다

1개의 좋아요