Metronic and Next JS
Hello. We downloaded Metronic HTML and we want to prepare it with NextJS. Is there a documentation to do this? We imported js and css files while breaking it down. However, we get such an error.
TypeError: Cannot read properties of undefined (reading 'init')
The error starts directly from here:
var KTComponents = {
init: function() {
KTAp.init(),
KTDrawer.init(),
KTMenu.init(),
KTScroll.init(),
KTSticky.init(),
KTSwapper.init(),
KTToggle.init(),
KTScrolltop.init(),
KTDialer.init(),
KTImageInput.init(),
KTPasswordMeter.init()
}
};
We use typescript and eslint. typescript ignore didn't work.
Replies (2)
as far as I know, the codes you mention above are functions from jQuery (cause you got that code from HTML), you need to build from scratch if you want to build using next.js, and maybe some of the plugins are not available (the plugins only support jquery not for react).
Hi,
Sorry for the late reply.
In our HTML version, our components are initialized within the load event. However, in NextJs versions, content is rendered differently, and to use our JavaScript components, you'll need to move the initialization from the load event to the useEffect hook.
All components in HTML version are initialized in js/components/_init.js, you can move this initialization into useEffect as shown below:
useEffect(() => {
KTComponents.init();
});If you have further questions or require additional assistance, please don't hesitate to ask.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
