[NextJS] unhandledRejection: Error [ReferenceError]: Image is not defined

📱테스트 환경

"react": "18.2.0"
"react-dom": "18.2.0"
"typescript": "^5.1.6"

---

😢 내가 겪은 문제

기존에 .tsx 파일에 같이있던 함수를 분리하는 도중에 해당 코드에서 에러가 발생했다.

unhandledRejection: Error [ReferenceError]: Image is not defined

const imageElement = new Image();
                    ^

이게 에러가 브라우저 콘솔창에서는 안나왔는데, VS Code 터미널에는 발생하는 에러였다.

딱히 문제가 되는 건 없었는데, 매우 거슬렸다.

해당 스택오버플로우를 참고해서 수정해봤는데 깔끔하게 실패했다. 에러는 나랑 같은 것 같은데, 이렇게 하는게 아닌 것 같았다.

Next.js - Image is not 'defined"

일단 원인은 Image 클래스는 브라우저의 DOM 요소로, 클라이언트 측에서만 사용할 수 있다.

다시말해서 브라우저 환경에서는 동작하지만, 서버 측에서는 해당 클래스가 없다는 에러가 발생한다고 한다.

이를 해결하기 위해서는 스크립트가 웹 페이지에서 실행되고 있는지 여부를 확인해주고 실행시켜주면 깔끔하게 해결 할 수있다.

if (typeof window !== "undefined") {
	
    ...
    
    const imageElement = new Image();
    
    ...
    
    return imageElement;
}

생각보다는 쉽게 해결할 수 있는 방법이 있어서 다행이다.

아니면 자동으로 검사할 수 있는 useEffect 를 사용하는 것도 하나의 방법일 수 있겠지만, 나는 함수를 분리하고싶었다.

useEffect(() => {

}, [])