'ERROR TypeError: Cannot read properties of undefined (reading 'qa')

I can't fix this. I'm using webdatarocks with googlecharts in Next.js. When I change the pivot design to flat mode appears an error when this code are executed in my component:

window.webdatarocks.googlecharts.getData(
        { type: props?.chartType },
        drawChart,
        drawChart
      );

This is the drawChart function:

  const drawChart = (_data) => {
    console.log("DRAW CHART", _data);
    setData(_data?.data?.length ? _data.data : []);
    setDataReady(true);
    setTitle(_data?.options?.title);
  };

This is my chart component (import { Chart } from "react-google-charts";) returned:

<Chart
  id={props.chartContainerId}
  loader={<CircularProgress />}
  chartType={ChartTypes[props?.chartType]}
  options={{ title: title, height: props?.height || 500 }}
  data={data}
  width="100%"
/>

My package.json dependencies:

"react-google-charts": "^4.0.0",
"react-webdatarocks": "^1.4.4",
"webdatarocks": "1.4.2",

And this is the error:

ERROR TypeError: Cannot read properties of undefined (reading 'qa') at d.zx (webdatarocks.js?9fcc:176:131) at d.getData (webdatarocks.js?9fcc:174:164) at h.getData (webdatarocks.js?9fcc:156:356) at k.getData (webdatarocks.js?9fcc:1082:273) at Object.PivotApi.k.getData (webdatarocks.js?9fcc:1089:292) at Object.WebDataRocksGooglecharts.getData (webdatarocks.googlecharts.js?0db4:31:1) at getData (GoogleChartReact.js?8bed:23:26) at eval (GoogleChartReact.js?8bed:7:6) at invokePassiveEffectCreate (react-dom.development.js?ac89:23487:1) at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:3945:1) at HTMLUnknownElement.dispatchEvent () at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:3994:1) at invokeGuardedCallback (react-dom.development.js?ac89:4056:1) at flushPassiveEffectsImpl (react-dom.development.js?ac89:23574:1) at unstable_runWithPriority (scheduler.development.js?c964:468:1) at runWithPriority$1 (react-dom.development.js?ac89:11276:1) at flushPassiveEffects (react-dom.development.js?ac89:23447:1) at performSyncWorkOnRoot (react-dom.development.js?ac89:22269:1) at eval (react-dom.development.js?ac89:11327:1) at unstable_runWithPriority (scheduler.development.js?c964:468:1) at runWithPriority$1 (react-dom.development.js?ac89:11276:1) at flushSyncCallbackQueueImpl (react-dom.development.js?ac89:11322:1) at flushSyncCallbackQueue (react-dom.development.js?ac89:11309:1) at discreteUpdates$1 (react-dom.development.js?ac89:22420:1) at discreteUpdates (react-dom.development.js?ac89:3756:1) at dispatchDiscreteEvent (react-dom.development.js?ac89:5889:1)



Solution 1:[1]

The getData API call is supported only in a compact/classic form in order to return pre-aggregated data for charts.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maxym Diachenko