TypeError: Cannot assign to read only property ... - Editing datasets with Redux

I’m a novice at React & Redux, so excuse me if there is an easy solution to this - I’m not able to find one currently.

I’m utilizing react-chartjs-2 with Redux to create some charts with dynamic data based on <input>s. The core of the chart code can be reduced down to:

slice.js:

export const flywheelSlice = createSlice({
  name: "flywheel",
  initialState: {
    windupTime: Qty(0, "s"),
    windupTimeChart: {
      options: {},
      data: [],
    },
  },
  reducers: {
    // . . .
    generateWindupTimeChartReducer: (state, action) => {
      // . . .
      const data = [];
      const getTime = (ratio) => {
        // return some data
      };

      for (let i = start; i < end; i += step) {
        const time = getTime(i);
        if (time.scalar !== 0) {
          data.push({
            x: i,
            y: time.scalar,
          });
        }
      }

      state.windupTimeChart.data = _.orderBy(data, ["x"]);
      state.windupTimeChart.options = makeOptions( ... );
    },
  },
});

Flywheel.js:

  const chart = useRef(null);
  const windupTimeChart = useSelector((s) => s.flywheel.windupTimeChart);
  return (
        // . . .
        <Line
            data={{
              datasets: [
                {
                  data: windupTimeChart.data,
                },
              ],
            }}
            options={windupTimeChart.options}
            ref={chart}
          />
   );

I’m finding a very odd issue where updating data for one chart, updating data for another, and then updating data for the first one causes an error with read only data … but not always.

The stacktrace can be found here:

TypeError: Cannot assign to read only property 'length' of object '[object Array]'
    at Array.splice (<anonymous>)
    at http://localhost:3000/static/js/1.chunk.js:91796:22
    at Array.map (<anonymous>)
    at ChartComponent.updateChart (http://localhost:3000/static/js/1.chunk.js:91790:60)
    at ChartComponent.componentDidUpdate (http://localhost:3000/static/js/1.chunk.js:91661:10)
    at commitLifeCycles (http://localhost:3000/static/js/1.chunk.js:112255:26)
    at commitLayoutEffects (http://localhost:3000/static/js/1.chunk.js:115207:11)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/1.chunk.js:92737:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/1.chunk.js:92786:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/1.chunk.js:92839:35)
    at commitRootImpl (http://localhost:3000/static/js/1.chunk.js:114949:13)
    at unstable_runWithPriority (http://localhost:3000/static/js/1.chunk.js:127010:16)
    at runWithPriority$1 (http://localhost:3000/static/js/1.chunk.js:103624:14)
    at commitRoot (http://localhost:3000/static/js/1.chunk.js:114791:7)
    at finishSyncRender (http://localhost:3000/static/js/1.chunk.js:114208:7)
    at performSyncWorkOnRoot (http://localhost:3000/static/js/1.chunk.js:114194:11)
    at http://localhost:3000/static/js/1.chunk.js:103678:28
    at unstable_runWithPriority (http://localhost:3000/static/js/1.chunk.js:127010:16)
    at runWithPriority$1 (http://localhost:3000/static/js/1.chunk.js:103624:14)
    at flushSyncCallbackQueueImpl (http://localhost:3000/static/js/1.chunk.js:103673:11)
    at flushSyncCallbackQueue (http://localhost:3000/static/js/1.chunk.js:103661:7)
    at flushPassiveEffectsImpl (http://localhost:3000/static/js/1.chunk.js:115283:7)
    at unstable_runWithPriority (http://localhost:3000/static/js/1.chunk.js:127010:16)
    at runWithPriority$1 (http://localhost:3000/static/js/1.chunk.js:103624:14)
    at flushPassiveEffects (http://localhost:3000/static/js/1.chunk.js:115224:16)
    at http://localhost:3000/static/js/1.chunk.js:115103:15
    at workLoop (http://localhost:3000/static/js/1.chunk.js:126954:38)
    at flushWork (http://localhost:3000/static/js/1.chunk.js:126910:20)
    at MessagePort.performWorkUntilDeadline (http://localhost:3000/static/js/1.chunk.js:126514:31)

which occurs here: https://github.com/jerairrest/react-chartjs-2/blob/master/src/index.js#L213

I assume this has to do with react-chartjs-2 editing the data property in place and Redux isn’t a fan of that? Is there a workaround, or does anyone have any examples with Redux they could point me to?

[jonra1993]

I had similar issue using redux and react-chartjs-2. I was able to solve it passing in this way

datasets: [
     {
           data: [...data],
     },
],

[raoufswe]

I’m facing the same issue with react apollo. I overcome the issue by cloning my data before passing it to the Line component.

I don’t think it’s the best workaround, and we should fix it from the library itself.