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:
- Installed a new Laravel site.
- Added keenthemes/ktui using npm install @keenthemes/ktui.
- Copied the src folder from the Metronic template to resources/metronic
- Copied the media folder to public/asset.
- Updated the KtUI paths in resources/metronic/css/styles.css.
- 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" packageI 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" packageTo 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 regards
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/ktuiAfter that, clear Vite’s cache and rebuild:
rm -rf node_modules/.vite
npm run devHello,
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: https://github.com/keenthemes/metronic-tailwind-html-integration/blob/main/metronic-tailwind-laravel/resources/views/index.blade.php
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 :/
