OK y'all. I've seen many many many (many, too many times) fall into the sink hole of KTUtil riddling their work.

I got fedup with the build tooling that comes with Metronic after trying for nearly two days to work with it.

In getting fed-up I found myself a SOLUTION. Now I'll need to do some more tests but this solution took 5 minutes total. I probably got lucky in that time knowing just where exactly everything I needed was. BUT I hope this will help you.


1. Branch off your master to a new branch.

2. Completely remove/delete the Metronic tooling (Webpack & Gulp) or gitignore it or .tools hide them for now - one thing was certain for me this tooling has no place in my project repo.
3. Combine your dist folder into the src folder if you're using html provided by Metronic
4. run ```pnpm create vite``` inside the root of your repo
5. move or copy the contents of src into the Vite project folder.
6. cd into the project folder (whatever you named it) & run ```pnpm install``` then your choice of ```pnpm run dev``` or ```pnpm run build``` (you'll have to do both anyway)
7. This resulted in some errors for me around source mapping so I created a vite config file (vite.config.js) -- this will go in the root of your new project folder.
8. I started using one option that worked for me in using optimizeDeps like so: ```
optimizeDeps: {
entries: ['./assets/plugins/custom/datatables/datatables.bundle.js']
}``` inside the vite config. Then scrolling the documentation just a bit more found the build source maps option in which I completely deleted what I'd done with optimizeDeps (but I mention it so you can try a second alternative if my solution doesn't work out the gate for you.)
9. Removed optimizeDeps and put in ```
build: {
sourcemap: true,
},```
10. ```pnpm run dev``` (WORKS!)
11. ```pnpm run build```(WORKS!)
12. You hopefully like me will be finished fighting the webpack and gulp tooling in place when you start with Metronic and you now have Vite, one of the most popular modern build tools currently in the market.

I hope this works for y'all, and you can put this to bed as I did.

Ahhh forgot to post my final vite.config.js --- think, all those files and lines of code inside configuring gulp and webpack compared to vite..


// vite.config.js
export default {
build: {
sourcemap: true,
}
}


------

For those of you in which don't find success in that, here was my vite.config.js with the optimize deps which also worked for me but I completely avoided to manually entering in paths for all the files that were undefined with KTUtil


export default {
optimizeDeps: {
entries: ['./assets/plugins/custom/datatables/datatables.bundle.js']
},
build: {
sourcemap: true,
}
}