Using the responsive option cause an Internal Error: too much recursion

[cyrilf]

As soon as I add a responsive property in the config object, any update to the config will trigger a "too much recursion" error.

I found a similar report on StackOverflow

Reproduction

I created a simple bug reproduction there.

1️⃣ Once loaded, go to page A. You should see the chart.
2️⃣ Click on "back" home.
3️⃣ Go to page B. You don't see the chart.

In the console you should see the error: Uncaught (in promise) InternalError: too much recursion.
If you click on "back" home, you won't be able to.. and the console display the error: Uncaught (in promise) TypeError: this.w.globals.dom.Paper is undefined.

Refreshing the page solves the issue, but this is not the intended behavior.

If we don't set the responsive property on the config, then, none of those error would happen.

[cyrilf]

If anyone is interested, I found a workaround.. not the best, obviously, but it solves my problem.

I'm using https://vueuse.org/core/useBreakpoints/ from the vueuse package.
So, instead of using the responsive option, I manually change the options object based on the current breakpoint.

Here is what I do:

import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";

const breakpoints = useBreakpoints(breakpointsTailwind);
const isSmall = breakpoints.smaller("lg");

const options: Ref<ApexOptions> = computed(() => ({
  legend: {
    position: isSmall.value ? "bottom" : "right",
    fontSize: isSmall.value ? "18px" : "20px",
  },
}));

instead of:

...
responsive: [
   {
     breakpoint: 1024,
     options: {
       legend: {
         position: "bottom",
         fontSize: "18px",
  }
]

[mateuswetah]

I've also bumped into this... the issue seems to start as long as I update other chartOptions settings. If the responsive is there, it falls into "Internal Error: too much recursion" after a few seconds.