[Node.js & bun.js] lightningCSS 네이티브 바이너리 이슈

 

 

멋쟁이사자처럼 프론트엔드 부트캠프 플러스 5기에서 종합 프로젝트로 'The:habit'을 진행하며 발생한 문제에 대한 트러블 슈팅이다.

카테고리를 어떻게 잡아야 할까 고민하다 결국 삽질일기에 적기로 했다.

 

---

❗️ 문제 상황

프로젝트에 PWA를 구현하기 위해 Web App Manifest를 작성했다.

PWA 구현을 확인하기 위해 bun run dev 명령 실행 시 정상적으로 렌더링 되지 않으며

app/globals.css에서 lightningcss.darwin-x64 모듈을 찾지 못한다는 에러메시지가 출력되었다.

 

💭 에러 메시지

GET / 500 in 2355ms
 ⨯ ./app/globals.css
Error evaluating Node.js code
Error: Cannot find module '../lightningcss.darwin-x64.node'
Require stack:
- /Users/harenkei/Documents/FEPL5/TheHabit/node_modules/lightningcss/node/index.js
- /Users/harenkei/Documents/FEPL5/TheHabit/node_modules/@tailwindcss/node/dist/index.js
- /Users/harenkei/Documents/FEPL5/TheHabit/node_modules/@tailwindcss/postcss/dist/index.js
- /Users/harenkei/Documents/FEPL5/TheHabit/.next/build/chunks/[turbopack]_runtime.js
- /Users/harenkei/Documents/FEPL5/TheHabit/.next/postcss.js
    [at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)]
    [at Module._load (node:internal/modules/cjs/loader:985:27)]
    [at Module.require (node:internal/modules/cjs/loader:1235:19)]
    [at require (node:internal/modules/helpers:176:18)]
    [at Object.<anonymous> (/Users/harenkei/Documents/FEPL5/TheHabit/node_modules/lightningcss/node/index.js:22:22)]
    [at Module._compile (node:internal/modules/cjs/loader:1376:14)]
    [at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)]
    [at Module.load (node:internal/modules/cjs/loader:1207:32)]
    [at Module._load (node:internal/modules/cjs/loader:1023:12)]
    [at Module.require (node:internal/modules/cjs/loader:1235:19)]

Import trace:
  ./app/globals.css [Client Component Browser]
  ./app/layout.tsx [Server Component]

 

---

❗️ 원인 파악

추측 1. bun.js와 lightningCSS의 호환성 문제 - 아님 ❌

이 추측을 ChatGPT에게 질의한 결과다.

bun은 Node.js ABI를 완전히 동일 구현한 런타임이 아니기 때문에 네이티브 모듈의 경우 호환성 문제가 있어 동작하지 않을 수 있다.

 

하지만 이 추측은 완벽히 빗겨나갔다.

 

추측 2. 설마... 아키텍처 이슈? - 맞음 ✅

 

나는 몇 주 전, 기존에 사용하던 2018년형 맥북 프로 15인치를 대신해 2024년형 M4 맥북 프로 14인치로 기변을 하였다.

2018년형 맥북 프로의 경우 Intel i7 프로세스로 x64 아키텍처를 사용하고, 2024년형 맥북 프로의 경우 M4 프로세스로 arm64 아키텍처를 사용한다.

 

새 맥을 설정할 때, 맥의 기본 애플리케이션인 '마이그레이션 지원'을 이용했는데, 이때 기존 맥의 설정이 그대로 넘어왔다.

새 맥의 terminal에서 node.js의 설치 위치를 확인해봤더니 /user/local/bin/에 node가 설치되어 있었다.

해당 설치 위치는 x64 아키텍처 환경에서 node가 설치되는 위치다.

또한 위의 이미지에서 확인할 수 있듯 해당 node가 지원하는 아키텍처는 x86_64, 즉... Intel 프로세서 macOS 용이었다.

 

terminal에 각각

node -p "process.arch"
# node의 프로세스 아키텍처를 확인하는 명령어

which node
# node가 위치한 디렉토리 위치를 요구하는 명령어

 

두 명령을 수행했을 때 각각의 결과가 arm64와 /opt/homebrew/bin/node가 나와야 했다.

그래야 내 새 맥의 아키텍처에 맞는 결과였다....

 

---

 

🔧 해결과 결과

Node.js를 arm64용 버전으로 재설치, 

brew를 이용해 기존 node를 삭제 후, nvm을 설치하여 nvm을 통해 arm64용 node를 다시 설치했다.

 

node의 process.arch가 arm64, 

node의 디렉토리 위치는 nvm을 통해 관리되고 있음을 확인할 수 있었다.

결과적으로 bun run dev 가 정상적으로 수행되었고 화면이 렌더링 되었다.

 

이제 이거로 속 썩을 일은 없겠지....