New Metronic Docs!Added Integration Docs with Starter Kits Apps for Laravel, Laravel Livewire, Angular, Vue, Symfony, Blazor Server, Django & Flask & more
Browse Docs
Light
Dark
System
Ask  Question

Metronic Tailwind v9.2.3 NextJS Issue


My Next.js app crashes when I open the burger menu (sheet) on mobile simulation in dev mode. This happens in the demo8 layout and all other demo layouts as well. Here is my console outputs:

https://imgur.com/18Lfdms
https://imgur.com/qW7H9J3 (multiple)
https://imgur.com/be1EcuJ


user
Doruk ÇORALI 1 week ago
Next.js Tailwind 4
5 Answers
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 (5)

user
Faizal Author6 days ago

Hi

https://keenthemes.com/metronic/tailwind/nextjs/demo8

Could you please check this link? Hopefully it's already fixed in the latest version 9.2.4

Thanks


user
Doruk ÇORALI 4 days ago

Hi,

I believe the problem was caused by browser extension. I’ve tested it on my phone, and everything works fine there.

The only thing I noticed on mobile is the following warning when opening the side menu:
'DialogContent' requires 'DialogTitle' for the component to be accessible for screen reader users.
But this seems to be a minor issue.

Thanks again


user
Faizal Author4 days ago

Hi

There is indeed a minor warning that appears when opening the side menu on mobile. We will address this issue in the upcoming updates.

Thanks


user
Faizal Author1 week ago

Hi Doruk ÇORALI

The crash issue happen in a freshly installed Metronic v9.2.3 NextJS without any customizations?

Thanks


user
Doruk ÇORALI 1 week ago

Hi Faizal,

Yes, it’s also happening on your live demo.

If I load the app in desktop resolution and then switch to a mobile size, the issue doesn’t occur. However, the app crashes if I reload the page while already in mobile resolution.

At first, I thought it might be caused by a browser extension, but the same issue occurs on my iPhone 13 Pro when connected to the local network in development mode.

Issue video:
Extension:

P.S.: This issue does not occur on my iPhone 13 Pro when accessing the live demo.

Thanks


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  :(