[Next.js] "ReferenceError: window is not defined" 이슈, dynamic import로 해결

1. 왜 터미널에서만 ReferenceError 에러를 뿜는 거지?

Next.js 프로젝트에 mind-ar 라이브러리를 설치한 후 import 하였다. 컴포넌트에서 mindar-image-three라는 모듈을 import 해야 하는데 인식하지 못했다. 그래서 아래와 같이 해당 모듈의 경로까지 작성하였다.

import { MindARThree } from "mind-ar/dist/mindar-image-three.prod";

여기까지는 그럭저럭 잘 넘겼다. 그런데-서버 사이드-터미널에서 "ReferenceError: window is not defined" 에러가 발생했다. 브라우저에서는 아무런 문제없이 화면이 렌더링 되었고 콘솔도 고요했다. 오직 터미널에서만 난리가 났다!

 

2. 동적 로딩(dynamic import)으로 고요하게!

이 오류는 클라이언트 측에서만 유효한 window 객체에 접근하려고 할 때 발생하는데, Next.js의 동적 로딩(dynamic import)으로 해결할 수 있다.

// ARComponent.jsx (클라이언트 컴포넌트)
"use client";
// (생략)
import { MindARThree } from "mind-ar/dist/mindar-image-three.prod";
// (생략)

위와 같은 자식 컴포넌트가 있다면, 부모 컴포넌트에서 위 컴포넌트를 로딩할 때 다음과 같이 처리하면 된다.

import dynamic from "next/dynamic";

const NoSsrARComponent = dynamic(() => import("./ARComponent"), {
  ssr: false, // 클라이언트 측에서만 실행
});

// (생략)
return <NoSsrARComponent />