[NUXT3] 500 window is not defined

NUXT3에서 apexcharts.js 라이브러리를 사용하다 에러가 발생했다.

500
window is not defined

at Object. (.../apexcharts.common.js:6:371062)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)

내용을 확인하면 apexcharts.common.js 에서 window 객체를 사용하다 발생한 오류다. NUXT의 server side에서 client에만 존재하는 window 객체에 접근했기 때문에 문제가 발생한 것이다.

nuxt.config.js 파일에서 client에서만 apexcharts를 사용하도록 수정해야한다.

export default defineNuxtConfig({
    // ...

    plugins: [
        {src: "@/plugins/apexchart.js", mode: 'client'}
    ]

    // ...
}

plugins 부분에서 apexchart를 가져오는 부분에 mode: 'client를 추가한다. 기존 NUXT2에서 ssr: false 로 지정했던 것과 동일하다.