Browser Console: [ECharts] There is a chart instance already initialized on the dom.

robertgz commented 4 months ago

Description

I am seeing a browser console messages when a component containing the EChart is rendered multiple times while the chart is initializing. I am not sure if this is an issue or if I need to change how I use the EChart component.

The console message I see when using Chrome is: [ECharts] There is a chart instance already initialized on the dom.

Link to Reproduction

https://stackblitz.com/edit/stackblitz-starters-6kgmdx?file=app%2Fpage.tsx

Steps to reproduce

Open the Stackblitz
Click Open Preview in a new tab at the top right of stackblitz and click on Connect to Project in the new tab/window.
Open the browser Console for the new tab/window.
The tab/window with the Preview may need to be refreshed a few times to see the message in the browsers Console.

JS Framework

Next.js 13 (TS)

Version

1.2.0

Browser

Google Chrome 126

Operating System

[ ] macOS
[X] Windows
[ ] Linux

Additional Information

If the number used in setInterval is increased from 200 to 2000 the console message does not show.

hugocxl commented 3 months ago

@robertgz fixed in 1.2.1

toshiya14 commented 2 months ago

@robertgz fixed in 1.2.1

Still appears in 1.4.0

hoeflerjo commented 1 month ago

This issue appears not to be solved. Like @toshiya14 it also still happens to me for most Charts without apparent reason. I found out this only accures on the first render when the chart is rerendered the chart appears. So my current solution: I use the useEffect hook without parameters and make a timeout with 1ms delay that just somehow triggers a rerender. In my case by just useing the next best useState I found. Like this:

const [value, setValue] = useState(0);
useEffect(() => {
    setTimeout(() => {
      setValue(value);
    }, 1);
  });

But this is propably the dirtiest quick fix I came up with and I hate it.

Addition: the setValue forcing a rerender must also be a dependency in the Chart instance to force the rerender there.

piotrzarzycki21 commented 1 month ago

I can confirm. I'm experiencing same issue here. Any chance it will be fixed ?

hugocxl commented 1 month ago

Hi guys, I am currently really busy and I cannot dedicate much time to solve it. It'd great if you could take a look (I can provide details for those who are interested). I am planning on releasing a v2.0 with a fresher API in the upcoming future, but currently I am not getting much time to dedicate to the lib. Sorry for the inconveniences 🙏

piotrzarzycki21 commented 1 month ago

Workaround from @hoeflerjo worked, but definitely I would love to look and see if I can provide PR. :)

piotrzarzycki21 commented 1 month ago

If you could point me to the right direction @hugocxl or if you won't have time I will try to figure out myself what is going on, but it will be probably super slowly ;)

hugocxl commented 2 weeks ago

@piotrzarzycki21 sure. Whenever the init function is called the ECharts instance gets initialized. https://github.com/hugocxl/react-echarts/blob/68f40a939e4be015f8647e412ae2f98c04af30bd/src/use-echarts.ts#L164

I tried disposing when the component unmounts (well I tried several options to do this, nothing worked), but somehow the instance does not get discarded. Therefore, next time init is called that warning is thrown.

Not sure what I'm missing here 😕

piotrzarzycki21 commented 2 weeks ago

@piotrzarzycki21 sure. Whenever the init function is called the ECharts instance gets initialized.

https://github.com/hugocxl/react-echarts/blob/68f40a939e4be015f8647e412ae2f98c04af30bd/src/use-echarts.ts#L164

I tried disposing when the component unmounts (well I tried several options to do this, nothing worked), but somehow the instance does not get discarded. Therefore, next time init is called that warning is thrown.

Not sure what I'm missing here 😕

Thank you! :) I will dive into that, won't be quick since I'm busy as well, but this warning drive me crazy in our app. ;)

hugocxl / react-echarts