Metronic Mega Update!Tailwind 4, React 19, Next.js 15, KtUI, ReUI, eCommerce, User Management Apps and more
Explore Update

Issues Integrating Metronic V9.2.0 with Laravel


Hello,

I recently purchased the Metronic V9.2.0 theme and am trying to integrate it with Laravel.

Despite several attempts, I am unable to properly install the theme. I have carefully followed all the steps but keep encountering an error during the build process.

Here’s what I have done so far:

  1. Installed a new Laravel site.
  2. Added keenthemes/ktui using npm install @keenthemes/ktui.
  3. Copied the src folder from the Metronic template to resources/metronic
  4. Copied the media folder to public/asset.
  5. Updated the KtUI paths in resources/metronic/css/styles.css.
  6. Modified the app.css and app.js files.




When I run npm run build, I get the following error:



[commonjs--resolver] Missing "./src/index" specifier in "@keenthemes/ktui" package


I suspected that the path in app.js might be incorrect, so I replaced:


import "@keenthemes/ktui/src/index";

with:


import "../../node_modules/@keenthemes/ktui/src/index";



However, this resulted in a new error:


[commonjs--resolver] Missing "./src/components/dropdown" specifier in "@keenthemes/ktui" package


To address this, I tried updating the file resources/metronic/core/components/menu/menu.ts by changing:


import { KTDropdown } from "@keenthemes/ktui/src/components/dropdown";

to:


import { KTDropdown } from "../../../../../node_modules/@keenthemes/ktui/src/components/dropdown";


This change allowed the build to pass, but the page still does not work as expected.

Am I missing something? Has anyone successfully integrated Metronic with Laravel? Any guidance would be greatly appreciated.

Thank you in advance for your help.

Best regardssad
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)


Hi Dany,

Thanks for the detailed explanation. it really helps.

We’ve recently pushed an update to the @keenthemes/ktui package that resolves the path-related import issues you mentioned (e.g. Missing "./src/index". To get the fixes:


npm upgrade @keenthemes/ktui


After that, clear Vite’s cache and rebuild:


rm -rf node_modules/.vite
npm run dev



Hello,

Great, the fix has resolved the compilation issue. Thank you for your quick response !!

However, not everything is working as expected yet:

1 - Page display:
My page doesn't look like it should. Here’s how it appears right now :
<img src="https://i.imgur.com/1j7QGdH.png" />
instead of
<img src="https://i.imgur.com/mddNpZ0.png" />
I am using the index.blade.php files provided on the GitHub repository of Metronic:

2 - Console issues:
The console shows several errors
<img src="https://i.imgur.com/8YVepyl.png" />

Also, I noticed numerous console.log() messages in the console, apparently caused by a console.log("result:" + e) left in the code (I hope it’s just a forgotten debug line 😅).

Could you help me resolve these new issues? Thank you in advance for your assistance!

Best regards,<img src="" />



OK, foud the problem.

in the file : resources/metronic/css/styles.css

We need to change

@source "../../../node_modules/@keenthemes/ktui/src/";


with


@import "../../../node_modules/@keenthemes/ktui/styles.css";



Hi Dany

Glad you fixed it.
We will improve the docs to simplify the integration.

Thanks



Also, why I don't have all the tailwind css classes like space-y-6 ? I only got space-y-10 for example :/


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