[react] window is not defined 에러 (apexchart)

로그를 보면 apexcharts.common.js 파일 내에서 window를 호출하다 발생한 에러다.

 

이 에러가 발생하는 이유는 서버사이드에서 호출이 일어났기 때문이다.

SSR을 지원하는 nextjs가 새로고침이 될때 저 부분을 import 하게 되는데, ssr에서는 window 객체가 없으므로 not defined가 뜨는 것이다.

 

이를 해결하기 위해 nextjs에서 제공하는 함수가 있다. 바로 dynamic 이라는 함수다

관련하여 공식 홈페이지에서 이와관련된 내용을 안내한다

https://nextjs.org/docs/advanced-features/dynamic-import

Advanced Features: Dynamic Import | Next.js

 

조건별로 import 를 하게 돕는 것인데, SSR에서 로드를 지연하는 방법을 지원한다. 다음과 같다.

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/hello3'),
  { ssr: false }
)

 

SSR 환경에서는 지원하지 않는다는 의미이며, window 객체가 없는 SSR에서 사용하면 오류를 피할 수 있다.

 

그래서 다음과 같이 응용 가능하다

import dynamic from 'next/dynamic'
const ApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });


return (
	...
		<ApexChart
            options={chartOption}
            series={chartData}
            type={"area"}
            />
	...
)

 

이렇게하니 더는 window is not defined 에러가 발생하지 않고 잘 작동한다.

아마 비슷한 문제로 에러나 가는 것들도 dynamic import로 가능할 듯 하다.

 

 

끝.