How to fix this.TD[this.j5] is null using Flexmonster

Question

I work on local environment and I use Next like framework. I use flexmonster component for react (https://www.npmjs.com/package/react-flexmonster) When I make some modifications the current flexmonster component shows me this error : this.TD[this.j5] is null

I know that Flexmonster works on CSR (client side rendering) and I used a custom debounce hook to wait before excute any flexmonster functions .

Flexmonster component code :

import { useRef } from 'react';
import dynamic from 'next/dynamic';
import useDebounce from '@hooks/useDebounce';
import 'flexmonster/flexmonster.css';

const DynamicFlexMonster = dynamic(() => import('react-flexmonster'), {
  ssr: false,
});

const Flexmonster = ({
  dataSource = [],
  rows = [],
  columns = [],
  measures = [],
  formats = {},
  viewType,
  gridType,
  chartType,
}) => {
  const flexmonsterDataStructure = {
    dataSource: {
      data: dataSource,
    },
    slice: {
      rows,
      columns,
      measures,
    },
    options: {
      viewType,
      grid: {
        type: gridType,
        showHeader: false,
        showTotals: false,
        showGrandTotals: 'off',
      },
      chart: {
        type: chartType,
      },
      showEmptyData: true,
    },
    formats,
  };

  const ref = useRef(null);
  const [debounceReport, setDebounceReport] = useDebounce(null);

  const onReportComplete = () => {
    setDebounceReport(ref.current, 1000);

    if (debounceReport) {
      console.log('>>>>', ref.current.flexmonster.getReport());
    }
  };

  return (
    <>
      <DynamicFlexMonster
        ref={ref}
        toolbar={false}
        width="100%"
        report={flexmonsterDataStructure}
        reportcomplete={onReportComplete}
      />
    </>
  );
};

export default Flexmonster;

Answer 1

I was facing the same issue, the main problem is Flexmonster use the window element so when you are working with an SSR framework like Nextjs you will need to call the all page where you display your Flexmonster component as SSR: false. From your code, you will have to call your Flexmonster component like this:

/* pages/my-flexmonster-component-page */

import dynamic from 'next/dynamic';
const Flexmonster = dynamic(() => import('@components/Flexmonster'), {
  ssr: false,
});

export default function MyFlexmonsterComponentPage(){

return (
 <> 
  <Flexmonster/>
</>
);
}