기본적인 앱생성후 실행시 에러

nasuk2da · 9월 16, 2025, 10:21오전

안녕하세요

앱인토스를 리엑트네이티브로 런칭하려고 합니다

해당 URL을 보고 처음부터 진행하고 있는데요

npm run dev 후 아무리해도 샌드박스앱에서 연결이안되서

포트포워딩 설정후 넘어가고 빌드되는것까진 확인했습니다.

근데 바로 에러가 뜹니다

ERROR Invariant Violation: TurboModuleRegistry.getEnforcing(…): ‘GraniteModule’ could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes
LOG Running “shared” with {“initialProps”:{“initialColorPreference”:“dark”,“loadingStartTs”:1758017865171,“initialFontScale”:“100”},“rootTag”:31}
ERROR Invariant Violation: “shared” has not been registered. This can happen if:

Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and AppRegistry.registerComponent wasn’t called., js engine: hermes

위와 같은 에러가 떠서 진행이 안됩니다. _app.tsx 설정도 여러가지 바꿔보고 하는데 안되네요 혹시 해결방법이 있을까요?

Dylan · 9월 18, 2025, 8:37오전

안녕하세요. 사용중이신 package.json 공유 부탁드려요.
_app.tsx 도 부탁드려요.

nasuk2da · 9월 18, 2025, 10:26오전

import { AppsInToss } from '@apps-in-toss/framework';
import { PropsWithChildren } from 'react';
import { InitialProps } from '@granite-js/react-native';
import { context } from '../require.context';

function AppContainer({ children }: PropsWithChildren<InitialProps>) {
  return <>{children}</>;
}

export default AppsInToss.registerApp(AppContainer, { context });

{
  "name": "maeum",
  "private": true,
  "scripts": {
    "dev": "bedrock dev",
    "build": "bedrock build",
    "test": "jest --passWithNoTests",
    "typecheck": "tsc --noEmit",
    "lint": "eslint ."
  },
  "dependencies": {
    "@apps-in-toss/framework": "^1.1.1",
    "@emotion/react": "^11.14.0",
    "@granite-js/native": "^0.1.23",
    "@granite-js/react-native": "^0.1.23",
    "@react-native-bedrock/native": "^0.0.25",
    "@toss-design-system/mobile": "^2.1.0",
    "@toss-design-system/mobile-ait": "^2.1.0",
    "@toss-design-system/react-native": "^1.1.1",
    "react": "18.2.0",
    "react-dom": "^19.1.1",
    "react-native": "0.72.6",
    "react-native-bedrock": "^0.0.25"
  },
  "devDependencies": {
    "@babel/core": "7.23.9",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
    "@babel/plugin-proposal-numeric-separator": "^7.16.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
    "@babel/plugin-transform-flow-strip-types": "^7.19.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@babel/runtime": "7.18.9",
    "@eslint/js": "^9.17.0",
    "@testing-library/react-native": "^12.9.0",
    "@types/babel__core": "^7.20.5",
    "@types/jest": "^29.5.14",
    "@types/node": "^22.10.2",
    "@types/react": "18.3.3",
    "eslint": "^9.17.0",
    "eslint-plugin-react": "^7.37.2",
    "jest": "^29.7.0",
    "prettier": "3.4.2",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.8.3",
    "typescript-eslint": "^8.31.0"
  }
}

_app.tsx 와 package.json 입니다~

Dylan · 9월 19, 2025, 12:54오전

엇 프레임워크를 업데이트 하신걸까요 ?

[공지] sdk 메이저 버전 업데이트 상세 안내 공지사항

안녕하세요, 앱인토스입니다. 최신 SDK 패키지가 업데이트되었습니다. (관련 공지 링크) 이에 따라 상세 안내를 드리니 개발하시는데 참고 부탁드립니다. 1. 처음 install 하는 경우 가이드를 참고하시어 개발 부탁드립니다. WebView React Native 2. TDS를 사용하고 있는 경우 TDS 버전 최신화 진행 후 제공되는 CLI를 통해 마이그레이션을 진행해 주세요. [ npm을 사용하여 TDS 버전 최신화하기 ] // 1. Webview npm install @toss-design-system/mobile@latest @toss-design-system/mobile-ait@latest npm install @apps-in-toss/web-framework@latest // 2. ReactNative npm install @toss-design-system/react-native@latest npm install @apps-in-toss/framew…

를 참고하셔서 패키지 매니저에 맞게 마이그레이션 해주실 수 있을까요 ?

ming · 9월 19, 2025, 2:42오전

같은 현상 발생합니다. Docs 따라 install 후 migrate 완료했습니다.

샌드박스 앱들도 최신 버전으로 업그레이드 했습니다!

iOS, Android 실제 디바이스들, simulator 전부 같은 에러 발생합니다.

# _app.tsx

import { PropsWithChildren } from "react";
import { Granite, InitialProps } from "@granite-js/react-native";
import { context } from "../require.context";
import { TDSProvider } from "@toss-design-system/react-native";

function AppContainer({ children }: PropsWithChildren<InitialProps>) {
  return <TDSProvider>{children}</TDSProvider>;
}

export default Granite.registerApp(AppContainer, {
  appName: "newsboy-test",
  context,
});

# package.json

import { PropsWithChildren } from "react";
import { Granite, InitialProps } from "@granite-js/react-native";
import { context } from "../require.context";
import { TDSProvider } from "@toss-design-system/react-native";

function AppContainer({ children }: PropsWithChildren<InitialProps>) {
  return <TDSProvider>{children}</TDSProvider>;
}

export default Granite.registerApp(AppContainer, {
  appName: "newsboy-test",
  context,
});

# granite.config.ts

import { defineConfig } from "@granite-js/react-native/config";

export default defineConfig({
  scheme: "intoss",
  appName: "newsboy-test",
  plugins: [],
});

에러 로그

 ERROR  Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'GraniteModule' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes
 LOG  Running "shared" with {"initialProps":{"initialColorPreference":"light","loadingStartTs":1758249598897,"initialFontScale":"100"},"rootTag":41}
 ERROR  Invariant Violation: "shared" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes

실행 순서

pnpm create bedrock-app@latest
cd my-bedrock-app
pnpm install
pnpm install @apps-in-tossapps-in-toss/framework@latest
pnpm ait init
p@toss-design-systempm install @toss-design-system/react-native@latest
TDSProvider로 감싸고 pnpm ait migrate granite
pnpm dev

ming · 9월 19, 2025, 3:00오전

@Dylan (cc. @nasuk2da )

해결 완료했습니다.

plugins에 appsInToss 넣어야하네요. 이 부분 docs에도 업데이트 해놓으면 새로 앱 런칭하시려는 분들께 도움 될 것 같습니다.

import { appsInToss } from "@apps-in-toss/framework/plugins";
import { defineConfig } from "@granite-js/react-native/config";

export default defineConfig({
  scheme: "intoss",
  appName: "newsboy-test",
  plugins: [
    appsInToss({
      brand: {
        displayName: "",
        primaryColor: "",
        icon: "",
        bridgeColorMode: "basic",
      },
      permissions: [],
    }),
  ],
});

nasuk2da · 9월 19, 2025, 3:09오전

오 감사합니다저도 가이드대로만하니까 자꾸 문제가 생겨서 제가한 순서를 올려보겠습니다.
1. npm create bedrock-app@latest
2. cd my-bedrock-app
3. npm install
4. npm install @toss-design-system/react-native@latest  (기존에 권한승인받고 npm 터미널에서 로그인되어있는상태)
5. npm install @apps-in-toss/framework@latest 
6. npx ait migrate granite
7. granite.config.ts 오류나는 상태를 


import { defineConfig } from "@granite-js/react-native/config";
import { appsInToss } from "@apps-in-toss/framework/plugins";

export default defineConfig({
  scheme: "intoss",
  appName: "my-bedrock-app",
  plugins: [
    appsInToss({
      brand: {
        displayName: "앱이름",
        primaryColor: "#3182F6",
        icon: "",
        bridgeColorMode: "basic",
      },
      permissions: [],
    }),
  ],
});

위와같이 변경 컬러값과 이름 넣어야함

이렇게하니까 드디어 실행되네요… 8일전 bedrock 에서 granite 으로 바뀐후 가이드가 잘 적용이 안되어있는것같은데 해당부분 실제로 아무것도 없는 컴퓨터에서 진행해봤을때 막히는부분있음 수정해주셨음 합니다~

Dylan · 9월 19, 2025, 9:20오전

제보 감사해요!
수정해두겠습니다

글		댓글	조회수
앱인토스 개발환경 실행시 샌드박스 Metro 문제 개발 webview , sdk , tds	2	133	9월 16, 2025
Granite 마이그레이션 이슈 개발	2	60	9월 11, 2025
초기화 이후 granite.config.ts에서 문제발생 개발 reactnative	1	80	9월 22, 2025
앱 테스트 관련 개발 reactnative	3	82	9월 29, 2025
V1.0.3 Granite 마이그레이션 이후 샌드박스 접속시 에러 개발	2	97	9월 11, 2025

기본적인 앱생성후 실행시 에러

함께 보면 좋은 글