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.