I've got a project that was set up on Mac. It uses Vue, Vite, Nuxt, and CoreUI, but not Sass. On a Windows computer, trying to use CoreUI components works sometimes, but applying any custom styling doesn't do anything. After enough messing around to get it working, the styles will randomly stop loading and be replaced with broken, empty elements. Inspecting the elements through the webpage devtools shows that no CoreUI styles are being applied in the first place.
The first few times this happened, refreshing the page or restarting the server was sufficient. Once that stopped working, I had to disable network caches and perform a hard refresh. The last time, the only fix was to completely shut down the server, delete the node_modules folder, and completely re-install everything. As of now, the issue has reoccurred, and it still hasn't gone away.
I'm looking for a permanent fix to this issue. I'm using npm 10.9.2 for windows and cross-env. I'm using Nuxt 3.15.2 and Vue 3, though I'm uncertain of the exact versions for all the packages.
The issue was caused by two problems:
The first issue was fixed by downgrading to node 18. The install failed a few times through the command prompt, which claimed that it couldn't find the npm zip file it just downloaded. Completely uninstalling and reinstalling nvm didn't work, so I manually installed the proper npm version myself. This appeared to work at first, but it didn't take long for me to realize I had improperly installed it which lead to the second problem, a corrupt install. I don't remember the exact steps I took to fix it, but I know the final step was something along the lines of:
Then, to clear out all leftover caching issues, I deleted my .nuxt and .output folders (your project might have .vite or similar folders instead) as well as my package-lock.json file and node_modules folder. Then I ran npm install to reinstall all dependencies and restarted my dev server.
Finally, I ran into one more problem. I'm not sure if it was related, but if you're still having issues then trying this could help. The final issue was that I would get odd, out-of-the-blue errors. For example, I got a syntax error the import statement for the defunFn package, and the statement was inside the node-modules folder. Meaning that it shouldn't have existed, because I just deleted and reinstalled everything inside that folder from scratch.
The solution to this problem: A clean install from package-lock.json.
Basically, I noticed my two branches from the same repo had the same package.json file, but wildly different package-lock.json files. One of these branches didn't have the odd errors, the other did. So, I did the following:
This basically just nuked all my local-only files that could be causing issues and used the correct package-lock.json file for installation instead of the package.json file. That way, the packages that are installed will be exactly the right version, because running npm install can sometimes cause mismatch errors across branches.