React native로 개발한 앱이 콘솔에 배포하면 흰화면으로 나옵니다

개발
1

샌드박스형태에서는 제대로 앱이 실행되는데
배포하여 테스트하면 흰화면만 나옵니다
혹시 몰라 신규 프로젝트를 만들어서 기본상태로도 올려봤는데 동일한 상태입니다.
확인 부탁드립니다.

appName (선택)

kindler-signmaker

2

@Dylan 해당 이슈에 대해 답변좀 부탁드립니다.

3

안녕하세요 :slight_smile:
npm create granite-app 로 새로운 RN 프로젝트 생성 후 빌드 > 배포해서 테스트시 정상적으로 앱이 보여지는 것 같아요 :thinking:
새로 생성하신 package.json 파일을 공유주실 수 있을까요 ?
QR 테스트시 흰 화면이 나오는 경우는 내부 로직에 이슈가 있을 확률이 높아요 :cry:

4 
{
  "name": "kindler-signmaker",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "granite dev",
    "build": "granite build",
    "test": "jest --passWithNoTests",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
    "@apps-in-toss/framework": "1.14.1",
    "@granite-js/native": "0.1.34",
    "@granite-js/plugin-router": "0.1.34",
    "@granite-js/react-native": "0.1.34",
    "@toss/tds-react-native": "1.3.8",
    "react": "18.2.0",
    "react-native": "0.72.6"
  },
  "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",
    "@granite-js/plugin-router": "0.1.34",
    "@types/jest": "^29.5.14",
    "@types/node": "^22.10.2",
    "@types/react": "18.3.3",
    "jest": "^29.7.0",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.7.2"
  }
}
5

혹시 제 테스트 번들을 업로드 해봐도 될까요 ?

6

네 괜찮습니다 :slight_smile: 테스트해주세요

7

흠.. 방금 올려서 테스트했는데, 잘 동작하네요 :thinking:
npm create granite-app 으로 생성하신 후 뭔가 추가하신게 있으신가요 ?

8

위에 package.json은 작업중이던 파일이였네요

이게 신규로 만든 프로젝트입니다.

{
  "name": "kindler-signmaker",
  "private": true,
  "scripts": {
    "dev": "granite dev",
    "build": "granite build",
    "test": "jest --passWithNoTests",
    "typecheck": "tsc --noEmit",
    "lint": "biome check --write"
  },
  "dependencies": {
    "@apps-in-toss/framework": "^1.14.1",
    "@granite-js/native": "0.1.34",
    "@granite-js/react-native": "0.1.34",
    "react": "18.2.0",
    "react-native": "0.72.6"
  },
  "devDependencies": {
    "@babel/core": "7.28.5",
    "@babel/runtime": "7.28.4",
    "@biomejs/biome": "^1.9.4",
    "@granite-js/plugin-hermes": "0.1.34",
    "@granite-js/plugin-router": "0.1.34",
    "@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",
    "babel-preset-granite": "0.1.34",
    "jest": "^29.7.0",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.8.3"
  }
}
9

npm create granite-app 하고 ait init로 초기셋팅하고 cli로 deploy 한거밖에 없습니다.

10

샌드박스에서는 잘뜹니다. 혹시 배포된 앱에 에러로그를 볼수있는방법 없을까요 ?

11

js 단에서 에러가 발생한다면, sentry 로 에러 로그를 확인할 수 있습니다

12

혹시 신규프로젝트 mac으로 진행하셨나요 ?
윈도우로 해보시면 신규프로젝트 빌드시에 경로를 제대로 못 찾아서 빌드를 제대로 못하는데 이거 한번 확인해주시면좋을것같습니다.
.granite/micro-frontend-runtime.js:39:27: ERROR: Could not resolve “C:UsersPCDesktopKindler\testkindler-signmakersrc_app.tsx”

그래서 강제로
@granite-js\plugin-micro-frontend\dist\index.js 해당 파일에서

import * as ${identifier} from ‘${path.resolve(modulePath)}’;

위 코드를 아래 코드로 강제로 변경해서 테스트 하였는데
import * as ${identifier} from ‘${path.resolve(modulePath).replace(/\\/g, ‘/’)}’;

윈도우로 빌드하기 위해 모듈 코드를 변경하다보니 샌드박스에서는 잘되는데 배포시 문제가 생겼던거 같습니다.