Datatable error before initialization
Hello dev!
I got issue on my KTDataTable when try to integrate core into my nextjs application there is error show error message:
ReferenceError: Cannot access 'KTDataTable' before initialization
i have no idea with this error because this error get from core/components/datatable/datatable.ts
but, if i commented the code below in core/index.ts:
...
KTDataTable.init();
...
window.KTDataTable = KTDataTable;
it's work fine.
Please help me how can i resolve this issue?
Thank you
Replies (5)
Glad it worked! If you encounter any more issues or need further help, feel free to ask. Happy coding! 
Hi!
The error occurs because KTDataTable is being accessed before it’s fully initialized. In a Next.js environment, make sure the script is loaded client-side to prevent SSR conflicts.
Try wrapping the initialization in a useEffect hook:
import { useEffect } from "react";
useEffect(() => {
if (typeof window !== "undefined") {
KTDataTable.init();
window.KTDataTable = KTDataTable;
}
}, []);Let me know if it helps!
I've tried your method to move KTDataTable initialization code from core metronic folder to the GlobalInit component and it's worked. Thanks.
Here is my code
export default function GlobalInit() {
useEffect(() => {
KTComponent.init();
KTLayout.init();
KTDataTable.init();
}, []);
return null;
}
Hello Falih,
This error is most likely related to the server-side rendering principles of Next.js. There are a few different solutions to this issue. I don’t have the UI template you’re using, so I couldn’t debug the error directly. Sometimes, manual adjustments are needed when integrating the core, or certain components might require further development. If you share the link to the version of Metronic you’re using, I’ll be able to assist you better.
I'm using metronic v9.1.2, NextJs 15 with App router, and i follow the integration instruction from this link
https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/nextjs
