Search code examples
vue.jsnpmpatchpatch-package

Patching a NPM package locally with patch-package, not working


I'm working on a vue.js frontend, and I need to patch a package to fit the special needs of the app. The package I'm trying to patch is 'vue-youtube' (not that it really matters). I'm trying to patch it with patch-package (https://www.npmjs.com/package/patch-package)

So basically :

  • I edited locally the /node_modules/vue-youtube/src/vue-youtube.js to fit my needs
  • I did add the postinstall script in my package.json : "scripts": { "postinstall": "patch-package" }
  • I did npm install patch-package --save-dev
  • Then I ran npx patch-package vue-youtube
  • It did create a vue-youtube+1.4.0.patch file in a /patches folder with my modifications

BUT, my modifications are not seen. When I do npm run serve and launch my webapp, the package used is still the one not edited. I tried running npm install before, without success. When I go to the /node_modules/vue-youtube/dist/vue-youtube.js (thankfully it is a small package so it is readable), I can see that indeed my modifications have not been "compiled".

What am I missing here ? I feel like I have followed eveything in the patch-package npm page..

Thanks

EDIT : Still investigating.. few more informations/questions :

  • my patch name is patches/vue-youtube+1.4.0.patch
  • when i run npm ls vue-youtube it returns just one element : [email protected]
  • in my package.json the dependency listed is "vue-youtube": "^1.4.0", should it be different ? should it mention that it needs to be patched ?

EDIT 2 : I realized that I am not editing the node_modules/vue-youtube/dist/vue-youtube.js, but the node_modules/vue-youtube/src/vue-youtube. If you edit the files in the dist folder, the patch works. (however I thought patch-package would allow me to edit the files in the src folder, in readable JS...)


Solution

  • WORKING SOLUTION : If you edit the files directly in the dist/ folder of the package instead of the src/ folder, the patch works fine.