윈도우 첫 빌드 시 "Uncaught exception occurred" 에러 관련 임시방편

개발
,
1

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

정보 공유

내용을 설명해주세요

  • 개발 환경: React Native, Windows
  • SDK 버전: 2.4.0

윈도우 첫 빌드 시

error Uncaught exception occurred

Error: Build failed with 1 error:
.granite/micro-frontend-runtime.js:39:27: ERROR: Could not resolve "C:Users***Desktop***src_app.tsx"

윈도우의 경우 .granite 폴더의 micro-frontend-runtime.js 에서 백슬래시()가 사라지는 문제가 발생하여
빌드가 이루어지지 않는 문제가 있습니다.
(plugin-compat 에서도 동일한 문제 발견)

[AppRoot]/scripts/fix-windows-path.mjs 파일 생성 후

import fs from "node:fs";
import path from "node:path";

const targets = [
    {
        file: "node_modules/@granite-js/plugin-micro-frontend/dist/index.js",
        from: "path.resolve(modulePath)",
        to: "path.resolve(modulePath).replaceAll('\\\\', '/')",
    },
    {
        file: "node_modules/@granite-js/plugin-micro-frontend/dist/index.cjs",
        from: "path.default.resolve(modulePath)",
        to: "path.default.resolve(modulePath).replaceAll('\\\\', '/')",
    },
    {
        file: "node_modules/@apps-in-toss/plugin-compat/dist/index.js",
        from: 'const reactUsePolyfillPath = __require.resolve("react18-use");',
        to: 'const reactUsePolyfillPath = __require.resolve("react18-use").replaceAll("\\\\", "/");',
    },
    {
        file: "node_modules/@apps-in-toss/plugin-compat/dist/index.js",
        from: 'const reactEffectEventPolyfillPath = __require.resolve("use-effect-event");',
        to: 'const reactEffectEventPolyfillPath = __require.resolve("use-effect-event").replaceAll("\\\\", "/");',
    },
    {
        file: "node_modules/@apps-in-toss/plugin-compat/dist/index.cjs",
        from: 'const reactUsePolyfillPath = require.resolve("react18-use");',
        to: 'const reactUsePolyfillPath = require.resolve("react18-use").replaceAll("\\\\", "/");',
    },
    {
        file: "node_modules/@apps-in-toss/plugin-compat/dist/index.cjs",
        from: 'const reactEffectEventPolyfillPath = require.resolve("use-effect-event");',
        to: 'const reactEffectEventPolyfillPath = require.resolve("use-effect-event").replaceAll("\\\\", "/");',
    },
];

let patchedCount = 0;

for (const target of targets) {
    const targetFile = path.resolve(globalThis.process.cwd(), target.file);

    if (!fs.existsSync(targetFile)) {
        globalThis.console.warn(`[fix-granite-path] target not found: ${target.file}`);
        continue;
    }

    const original = fs.readFileSync(targetFile, "utf8");

    if (original.includes(target.to)) {
        globalThis.console.log(`[fix-granite-path] already patched: ${target.file}`);
        continue;
    }

    const legacyWrongTo = target.to.replace("\\\\',", "\\\\\\\\',");
    if (original.includes(legacyWrongTo)) {
        const corrected = original.replace(legacyWrongTo, target.to);
        fs.writeFileSync(targetFile, corrected, "utf8");
        patchedCount += 1;
        globalThis.console.log(`[fix-granite-path] corrected legacy patch: ${target.file}`);
        continue;
    }

    if (!original.includes(target.from)) {
        globalThis.console.warn(`[fix-granite-path] expected snippet not found: ${target.file}`);
        continue;
    }

    const patched = original.replace(target.from, target.to);
    fs.writeFileSync(targetFile, patched, "utf8");
    patchedCount += 1;
    globalThis.console.log(`[fix-granite-path] patch applied: ${target.file}`);
}

if (patchedCount === 0) {
    globalThis.console.log("[fix-granite-path] no changes");
}

package.json 파일에서

"scripts": {
        "postinstall": "node scripts/fix-windows-path.mjs",
        "dev": "granite dev",
        "build": "npm run postinstall && ait build",
    },

와 같이 작성 후 npm run build 하시면 해결할 수 있었습니다.