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...)


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


Adding below npm script in package.json after patching worked for me.

scripts:  {
  "prepare": "patch-package",
}

The lines from yarn documentation explains about prepare

For compatibility reasons, scripts called install, postinstall, prepublish, and prepare will all be called after your package has finished installing.

After adding this script in package.json, the changes of module file in patches folder has been patched into respective node module.