Metronic 8 HTML with Symfony and Webpack Encore
Hello,
I just purchased Metronic and tried to import it in my Symfony project, but I just couldn't.
After looking at the Symfony starter, I realised the development was too far ahead to do that much changes, so I decided to go with the html demos (demo1, to be precise).
We're using Webpack Encore with Symfony, and I'm trying to use to bundle up all the js and scss files used by Metronic.
I tried different things, and the closest I've gotten is by using this
.addEntry("metronic-scripts", glob.sync("./assets/metronics/src/js/**/*.js").map((e) => `./${e}`))But then I get the following error: uncaught ReferenceError: KTUtil is not defined
Haven't tried doing the scss files yet, but they should work fine. Also tried bundling using the
toolsAny help would be greatly appreciated.
KR,
Matteo
Replies (4)
Hi Matteo Gassend,
I apologize for the delay in my response.
To resolve the issue, ensure that the Metronic JavaScript files are loaded in the correct order. Metronic relies on certain scripts being loaded before others.
You might want to check the HTML version of Metronic for guidance on how to set up Webpack. The HTML version may have similar webpack configurations as Symfony Encore.
Additionally, please check the following files in the HTML version:
/metronic_html_v8.2.3_demo1/tools/webpack/plugins/plugins.js
/metronic_html_v8.2.3_demo1/tools/webpack/scripts.demo1.js
You can try importing these scripts as entries in Webpack Encore. Ensure that the path to the node_modules directory is correct in your Webpack configuration.
Thanks
Hi Faizal,
thanks for the reply! I ended up adding the necessary imports in the base files and the js works!
To fix the problem, make sure the Metronic JavaScript files are loaded in the correct order. Metronic is dependent on certain scripts loading before others.
Hi Matteo Gassend,
You're welcome! I'm glad to hear that you found a solution. If you have any more questions or if there's anything else I can help you with, feel free to reach out.
