ReferenceError: window is not defined on next.js

[tiago138]

Hi, I'm trying to use this chart on next.js but I'm getting the ReferenceError: window is not defined on next.js. I don't know what it can be since I'm already using other echarts charts on my project, I only get this erro, when I import echarts wordcloud. If anyone here know what can be causing the error I really would appreciate the help.

Thanks guys for your awesome project.

[tiago138]

I get this on my console

error - node_modules/echarts-wordcloud/src/layout.js (12:0) @ eval
ReferenceError: window is not defined
null

[achaitanyasai]

I have faced the same issue recently, and I was able to resolve by importing echarts-wordcloud on the client side:

import {useEffect, useState} from "react";

import * as echarts from 'echarts/core';
import {CanvasRenderer} from "echarts/renderers";
import {
    TitleComponent,
} from 'echarts/components';
echarts.use([
    TitleComponent,
    CanvasRenderer
]);

export default function WordCloudChartClientComponent(props) {
   const [WordCloudInitialized, setWordCloudInitialized] = useState(false);
   useEffect(() => {
      // Initialize ECharts Word Cloud.
      const initWordCloud = async() => {
        await import('echarts-wordcloud');
        setWordCloudInitialized(true)
      }
      initWordCloud();
  }, []);

  return (
    <>
        WordCloudInitialized ?
             <SomeComponentDependentOnWordCloud echarts={echarts} />
            : <p>Loading...</p>
    </>
  );

}