Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(