샌드박스 앱에서 실행 되는데 빌드 후 qr로 토스 앱으로 접속했을 때 흰 화면 발생하는 문제

개발
1

안녕하세요.

빌드 파일을 콘솔에 업로드 하고 qr로 접속했을 때 흰 화면만 보이는데 원인을 알 수 있을까요?

다른분들이 pnpm에서 문제가 있다고 하셔서 npm으로도 해봤는데 안되고

turborepo로 모노레포로 구성한게 문제일까 싶어서 독립된 프로젝트로 변경도 했는데 안되네요

{
  "name": "",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "GRANITE_ENV=development granite dev",
    "build": "granite build",
    "build:prod": "GRANITE_ENV=production granite build",
    "test": "jest --passWithNoTests",
    "typecheck": "tsc --noEmit",
    "lint": "biome check --write"
  },
  "dependencies": {
    "@apps-in-toss/framework": "^1.3.0",
    "@granite-js/native": "0.1.29",
    "@granite-js/plugin-env": "0.1.29",
    "@granite-js/plugin-hermes": "^0.1.29",
    "@granite-js/plugin-router": "0.1.29",
    "@granite-js/plugin-sentry": "^0.1.29",
    "@granite-js/react-native": "0.1.29",
    "@sentry/react-native": "^7.4.0",
    "@tanstack/react-query": "^5.90.5",
    "@toss-design-system/react-native": "^1.2.1",
    "@project/shared-types": "file:./shared-types",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-flexible-grid": "^0.2.5",
    "react-native-image-viewing": "^0.2.2"
  },
  "devDependencies": {
    "@babel/core": "7.28.4",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/plugin-transform-flow-strip-types": "^7.27.1",
    "@babel/preset-env": "^7.28.3",
    "@babel/preset-react": "^7.27.1",
    "@babel/preset-typescript": "^7.27.1",
    "@babel/runtime": "7.28.4",
    "@biomejs/biome": "^2.2.6",
    "@granite-js/plugin-router": "0.1.29",
    "@testing-library/react-native": "^13.3.3",
    "@types/babel__core": "^7.20.5",
    "@types/jest": "^30.0.0",
    "@types/node": "^24.8.1",
    "@types/react": "18.3.3",
    "jest": "^30.2.0",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.9.3"
  }
}

콘솔에 업로드된 ait 파일로 원인 파악해주실 수 있을까요?

실행 환경
os : mac 26.0.1
node : v22.15.0 or v20.19.1

2

npm 스캐폴딩 샘플로 테스트 해봤는데 dev로 실행해서 샌드박스앱에서는 잘 동작하는데
build 후 qr로 접속하니까 404 Not Found가 발생해요

3

의존성에서 @toss-design-system/react-native 대신 @toss/tds-react-native 로 변경 한번 해보시고 다시 테스트해봐주실 수 있을까요?

4

변경해봤는데 여전히 흰 화면만 노출되고 있습니다

{
  "name": "",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "GRANITE_ENV=development granite dev",
    "build": "granite build",
    "build:prod": "GRANITE_ENV=production granite build",
    "test": "jest --passWithNoTests",
    "typecheck": "tsc --noEmit",
    "lint": "biome check --write"
  },
  "dependencies": {
    "@apps-in-toss/framework": "^1.3.0",
    "@granite-js/native": "0.1.29",
    "@granite-js/plugin-env": "0.1.29",
    "@granite-js/plugin-hermes": "^0.1.29",
    "@granite-js/plugin-router": "0.1.29",
    "@granite-js/plugin-sentry": "^0.1.29",
    "@granite-js/react-native": "0.1.29",
    "@sentry/react-native": "^7.4.0",
    "@tanstack/react-query": "^5.90.5",
    "@toss/tds-react-native": "^1.3.3",
    "@project/shared-types": "file:./shared-types",
    "react": "18.2.0",
    "react-native": "0.72.6",
    "react-native-flexible-grid": "^0.2.5",
    "react-native-image-viewing": "^0.2.2"
  },
  "devDependencies": {
    "@babel/core": "7.28.4",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-numeric-separator": "^7.18.6",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/plugin-transform-flow-strip-types": "^7.27.1",
    "@babel/preset-env": "^7.28.3",
    "@babel/preset-react": "^7.27.1",
    "@babel/preset-typescript": "^7.27.1",
    "@babel/runtime": "7.28.4",
    "@biomejs/biome": "^2.2.6",
    "@granite-js/plugin-router": "0.1.29",
    "@testing-library/react-native": "^13.3.3",
    "@types/babel__core": "^7.20.5",
    "@types/jest": "^30.0.0",
    "@types/node": "^24.8.1",
    "@types/react": "18.3.3",
    "jest": "^30.2.0",
    "react-test-renderer": "18.2.0",
    "typescript": "^5.9.3"
  }
}
5

**"react-native-flexible-grid": "^0.2.5"
"react-native-image-viewing": "^0.2.2"

혹시 이런 라이브러리 문제일까 싶어서 삭제도 하고 yarn 으로도 시도해보고 했는데
계속 빈 화면만 보이네요.. ㅠㅠ**

6

@minsoo 님 안녕하세요

브릿지 뷰가 뜬 이후 흰화면이 보인다면 OOM 이슈일 가능성이 높습니다.

메모리 최적화를 검토 요청드려도 될까요?

7

@dohyung @seonjeong 해결했습니다!

브릿지 뷰가 안뜨고 빈 화면만 나왔었습니다! 메모리 확인해보니 첫 화면에서 수십 mb 정도뿐이 사용하고 있지 않아서 OOM 이슈는 아니라고 생각했어요

해결이 안돼서 새로운 프로젝트를 만들어 하나씩 변경하면서 테스트를 해봤는데 require.context.ts 파일이 biome가 동작해 // @ts-ignore이 // @ts-expect-error 으로 변경된게 문제의 원인이였습니다.

before (기존 - 문제없음)

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
export const context = require.context('./pages');

after (biome 동작 - 빌드 파일에서 빈 화면 발생)

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
export const context = require.context("./pages");

기본 스캐폴딩의 biome 설정으로는 이 파일이 biome 대상이 아니라서 문제가 없었을텐데 서버와 동일한 레포에서 개발하기 위해 모노레포를 구성하면서 biome 설정이 스캐폴딩이랑 달라져 저 파일이 biome 대상으로 들어가서 문제가 발생됐습니다.

동일한 문제를 방지하기 위해 기존에 존재하는 eslint suppression 에 추가로 biome suppression를 추가해놓으면 좋을것 같습니다!

// biome-ignore-all lint/suspicious/noTsIgnore: reason
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
export const context = require.context("./pages");

도움주셔서 감사합니다.

1개의 좋아요