cssvuejs3node-modulesnuxt3.jscore-ui

What causes CoreUI styles to suddenly stop applying in Vue Js?


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.


Solution

  • The issue was caused by two problems:

    1. Using packages that weren't completely compatible with the latest node/npm version
    2. Using a corrupt install of npm/node

    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:

    1. Ran a command that showed the file path nvm was using to run npm
    2. Deleted the folder at that location

    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:

    1. Copied the package-lock.json file from the working branch into another folder
    2. Switched to the problematic branch
    3. Completely deleted the entire contents of the repo folder except the .git folder
    4. Ran "git reset --hard" (no quotes) to restore the last commit
    5. Replaced the package-lock.json file with the copied version
    6. Ran "npm ci" (no quotes)

    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.