샌드박스 앱 테스트 실행 오류

개발
1

이 글의 성격은 무엇인가요?

질문 / 문제 해결

내용을 설명해주세요

제목

Granite RN 신규 프로젝트, 샌드박스 앱 실기기 연결 시 DefaultNavigationBar에서 Render Error (undefined is not a function)

환경

  • @apps-in-toss/framework: 2.10.4 (최신)
  • @granite-js/react-native: 1.0.34
  • @granite-js/native: 1.0.34
  • react-native: 0.84.0
  • 테스트 기기: iOS 실기기 (샌드박스 앱 최신 버전, 업데이트 없음 확인함)
  • granite.config.ts: navigationBar 관련 커스텀 설정 없음 (완전 기본값)

재현 방법

  1. npm create granite-app으로 새 프로젝트 스캐폴드 (appName: mystery-pot)
  2. npx ait init으로 초기화, @toss/tds-react-native 설치
  3. npm run dev로 Metro 개발 서버 실행
  4. 샌드박스 앱에서 로컬 네트워크 권한 허용 → Metro 서버 설정에 개발 서버 IP 입력 → 저장
  5. 스킴 intoss://mystery-pot 입력 후 “스키마 열기”
  6. Bundling 진행 후 화면이 뜨기 전에 Render Error 발생

에러 내용

Render Error
undefined is not a function

Sources (index.cjs):

806 | // src/components/NavigationBar/RNNavigationBar...
807 | function useNavigationEvent() {
808 |   const backEventContext = (0, import_react...  ← 크래시 지점
809 |   const logging = useNavigationBarLogging()
810 |   const navigation = (0, import_react_native...
811 |   const closeConfirm = useCloseConfirm();

1485 | function DefaultNavigationBar() {
1486 |   const globals = getAppsInTossGlobals();
1487 |   const { open: openMoreButtonBottomSheet } = ...  ← 크래시 지점
1488 |   const parsedNavigationBar = globals.navi...

Component Stack:

<DefaultNavigationBar />  dist/index.cjs:1487
<GeneralAppContainer />   dist/index.cjs:1578
<RNAppContainer />

이미 시도해본 것

  • 샌드박스 앱 최신 버전 확인 (업데이트 없음)
  • @apps-in-toss/framework, @granite-js/* 패키지를 npm 최신 버전으로 확인 (이미 최신)
  • node_modules, package-lock.json 삭제 후 클린 재설치 → 동일 증상
  • granite.config.ts의 icon URL 응답 확인 (200 OK, 문제 없음)

질문

  1. 이 크래시가 알려진 이슈인가요?
  2. navigationBar 설정을 넣지 않은 완전 기본 상태에서 발생하는데, 우회할 수 있는 설정값이 있을까요?
  3. 혹시 알려진 워크어라운드(특정 프레임워크 버전 다운그레이드 등)가 있다면 안내 부탁드립니다.
2

저도 동일한 문제를 겪고 있습니다. 새 프로젝트를 설정하고 초기화만 마친 상태인데 실행이 안되고 있네요. iOS 실기기와 시뮬레이터 모두 에러가 발생합니다.

[package.json]

{
  "name": "ait",
  "private": true,
  "scripts": {
    "dev": "granite dev",
    "build": "ait build",
    "test": "jest --passWithNoTests",
    "typecheck": "tsc --noEmit",
    "lint": "eslint .",
    "deploy": "ait deploy"
  },
  "dependencies": {
    "@apps-in-toss/framework": "^2.10.4",
    "@granite-js/native": "1.0.34",
    "@granite-js/react-native": "1.0.34",
    "@toss/tds-react-native": "^2.0.3",
    "brick-module": "0.5.1",
    "react": "19.2.3",
    "react-native": "0.84.0"
  },
  "devDependencies": {
    "@babel/core": "7.28.5",
    "@babel/runtime": "7.28.4",
    "@eslint/js": "^9.17.0",
    "@granite-js/plugin-hermes": "1.0.34",
    "@granite-js/plugin-router": "1.0.34",
    "@testing-library/react-native": "13.3.3",
    "@types/babel__core": "^7.20.5",
    "@types/jest": "^29.5.14",
    "@types/node": "^22.10.2",
    "@types/react": "19.2.0",
    "@types/react-test-renderer": "19.1.0",
    "babel-preset-granite": "1.0.34",
    "eslint": "^9.17.0",
    "eslint-plugin-react": "^7.37.2",
    "jest": "^29.7.0",
    "prettier": "3.4.2",
    "react-test-renderer": "19.2.3",
    "typescript": "^5.8.3",
    "typescript-eslint": "^8.31.0"
  },
  "dependenciesMeta": {
    "hermes-compiler": {
      "unplugged": true
    }
  }
}
3

안녕하세요 :slight_smile:

@granite-js/react-native: 1.0.31
@granite-js/native: 1.0.31

이렇게 바꿔서 npm install 후 다시 시도 해봐주실 수 있을까요 ?
1.0.34 에서 에러가 나는 부분은 빠르게 확인해보겠습니다.

4

다운그레이드 후 정상적으로 동작합니다! 감사합니다 :slight_smile: