SSR error when using Next.js - TypeError: Cannot read properties of undefined (reading 'initialWidth')

[pmnord]

I'm migrating a CRA project to Next.js and hitting this error TypeError: Cannot read properties of undefined (reading 'initialWidth')

Here's my component,

import React from 'react';

import { Chart } from 'react-charts';
import { Container } from '@mui/material';

import { timestampToMonthDay } from '../../core/helpers/Dates';

const PriceHistory = ({ priceHistory }) => {
  const priceChartData = React.useMemo(() => [], []);

  Object.keys(priceHistory).forEach((partner) => {
    const partnerPrices = [];
    let tempTimestamp = '';

    Object.keys(priceHistory[partner]).forEach((day) => {
      const indexedPrice = [];

      if (tempTimestamp !== timestampToMonthDay(day)) {
        indexedPrice.push(timestampToMonthDay(day));
        indexedPrice.push(priceHistory[partner][day]);

        tempTimestamp = timestampToMonthDay(day);
        partnerPrices.push(indexedPrice);
      }
    });

    priceChartData.push({
      label: partner,
      data: partnerPrices,
    });
  });

  const chartData = React.useMemo(() => priceChartData, [priceChartData]);

  const chartAxes = React.useMemo(
    () => [
      { position: 'bottom', primary: true, type: 'ordinal' },
      { position: 'left', type: 'linear' },
    ],
    []
  );

  return (
    <Container
      sx={{
        backgroundColor: 'background.paper',
        height: '400px',
        width: '100%',
      }}
      disableGutters
    >
      <Chart axes={chartAxes} data={chartData} curve="curvestep" tooltip />
    </Container>
  );
};

PriceHistory.defaultProps = {
  priceHistory: {},
};

export default PriceHistory;

[dkasipovic]

Why was this closed with no explanation? I am having the same issue