Plasmo 개발 환경에서 Next.js 앱 망가뜨리는 문제 해결하기

문제 상황

Plasmo로 Chrome Extension을 개발하다 보면, 위와 같이 아주 불쾌한 오류를 만날 때가 있습니다.

디버깅하기

저는 처음에 당연히 제가 contents script에 뭔가 단단히 잘못된 코드를 작성했다고 생각했습니다.
근데 아무리 봐도 cwd가 정의되지 않았다는 오류는, 서버에서 실행되어야 하는 코드가 모종의 이유로 클라이언트에서 실행되어 버려서 발생하는 오류같아 보여, 근본적인 원인을 찾아 나서기 시작했습니다.

globalThis.process = {
    argv: [],
    env: {
        VERBOSE: runtimeData.verbose,
    },
} as any;

문제가 되는 코드를 확인해 보면, 위와 같이 전역 객체를 오염시키고 있는 걸 볼 수 있습니다. 아마 Parcel 런타임에 process.env에 편하게 접근하기 위해 만들어둔 헬퍼 같은데, 이렇게 전역 객체를 더럽히니 Next.js가 Server-Side에서만 실행해야 할 코드를, Client-Side가 Server-Side라고 오인하여 클라이언트에서 실행되어 버린 것입니다.

해결 방법

이슈를 올려두었으나, 해결되지 않을 확률이 높아 보여, 직접 해결하는 방법도 공유해 볼까 합니다.

여러 방법이 있겠지만, 문제되는 코드를 직접 수정하고 overrides로 강제로 로컬에 있는 코드를 사용하는 방법을 소개해 볼까 합니다.

먼저 node_modules에서 parcel runtime을 찾습니다.
pnpm을 사용한다면 node_modules/.pnpm/@plasmohq+parcel-runtime@$VERSION에 있을 것입니다.

그 뒤, dist/ 아래의 3개 파일 모두에 globalThis.process를 override하는 부분을 찾아서 지워줍니다.
그리고 해당 디렉터리를 patches로 옮겨줍니다.

{
    "overrides": {
        "@plasmohq/parcel-runtime": "patches/@plasmohq/parcel-runtime"
    }
}

마지막으로 위와 같이 package.json에 overrides를 추가한 뒤, 의존성을 설치해주면 끝납니다.

저는 사실 parcel이 기본적으로 너무 느리기도 하고, 다른 툴들은 package.json의 exports 필드를 제대로 지원하는 반면 parcel은 그러지 못해 wxt라는 툴로 아예 마이그레이션을 진행했지만...혹여 Plasmo를 사용하며 문제를 겪는 분들을 위해 공유해 봅니다.

제발 전역 객체는 더럽히지 않았으면 좋겠네요...