Search code examples
node-modulesvite

Vite - how to change code in node_modules folder to debug/find errors


Coming from Webpack I was able to change code in the node_modules folder in order to add a console.log statement or something like this to find errors. Sometimes I use external libraries incorrectly and it's easier to be able to alter lines/files in the node_modules folder to find out what my mistakes are.

With Vite, this is not possible. I can change whatever I want in the node_modules folder by my browser still uses the original libraries code. Is there a way that allows me to change files so Vite will recognize the changes and use my new files?

Note: it's not about pull requests or permanent changes, it's only about an console.log(typeof X) and stuff like that for a single use.

Bascially the same question as this one Changing code in node_modules does not work in hot reload regardless of the bundler


Solution

  • Dep Pre-Bundling

    According to archive.org:vitejs.dev/guide/dep-pre-bundling.html it's not called "caching" but rather "dep pre-bundling" - y'know, because we wouldn't want the average Joe's search terms to work now would we? 😉

    Delete Vite Cache

    rm -rf ./node_modules/.vite
    

    Reload Dev without Vite Cache

    rm -rf node_modules/.vite; npm run dev
    

    Monkey Patch Away

    I was pulling my hair out trying to debug a dependency that needed a PR and doing dumb stuff like republishing vite-shim-foobar because I couldn't find the cache, but... I found it. So now I can monkey patch to debug things too!