TypeError: Cannot read properties of null (reading 'getPreviousPaths') in NextJS app

[kamzak]

Hello, I got problem with my charts in modal. First render of modal works well, but when i close it and try to open again I got this error:

Looks like, apexcharts trying to redraw previous points on chart, but got null.

`

• "react": "18.1.0",
  

• "next": "12.1.6",
  

• "apexcharts": "^3.36.3",
  

• "react-apexcharts": "^1.4.0",
  

`

I import apexcharts through: import dynamic from 'next/dynamic'; const ApexCharts = dynamic(() => import('react-apexcharts'), { ssr: false });

And use charts by returning it as component:

const [dataSeries, setDataSeries] = useState([]);

var chartOptions = {
//chart optiosn
}

useEffect(() => {

// some functions to format data
setDataSeries(formattedData);
}, [])

const series = [
	{
		name: 'Earnings',
		data: dataSeries || [],
	},
];

return (
		<>
			{dataSeries?.length > 0 && (
				<ApexCharts
					options={chartOptions}
					series={series}
					type='line'
					height={250}
					key={4}
				/>
			)}
		</>
	);

I would appreciate any advice how to counteract this behavior and showing errors.

@Edit This error comes with not working tooltips on synced charts and this error: Uncaught TypeError: Cannot read properties of null (reading 'ttItems')

@Edit2 Problem is gone after removing conditional option:

xaxis: { type: 'datetime', axisBorder: { show: true, }, axisTicks: { show: true, }, labels: { show: true, showDuplicates: false, // format: 'ddd', // (tableChartMode === 'week' && 'ddd') || // (tableChartMode === 'month' && 'dd MMMM') || // (tableChartMode === 'year' && 'MMMM'), }, }, Do you know any ideas to update options by apexcharts method in nextjs? Trying ApexCharts.exec(), my app says that ApexCharts.exec is not a function.

Regards

[shubhambhagat98]

@kamzak can you elaborate more on how you fixed this? I am also trying to sync charts in my NextJS app and I am getting the exact 2 errors. Any help is appreciated. Thanks!

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.