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

Question

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

Answer 1

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

Answer 2

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.

Answer 3

I was trying to do the exact same thing with some package, let's call it "some_package". When I saw the EDIT 2 my mind just connected the dots...

To test changes locally
Modify the files in node_modules/some_package/src folder and then, go to the node_modules/some_package and run:

$ npm install
$ npm run <name of the script that generates the dist folder>

No need to run npx patch-package nor postinstall step.

I think that this approach doesn't work for all packages, it depends on how the modified package's package.json is configured. Specifically, pay attention where the browser field is pointing (in my case ./dist/some_package.js).

CAVEAT: You will have to run npm install and npm run every time you make an update to the package.

To test changes and be able to share it among team members (when the package is on Github)

1. Make a fork of the package you want to modify.
2. Make all the changes you want to your forked version of the package.
3. Run the following to automatically update the package.json file to make the dependency point to your forked version:

$ npm install <github's user name>/<package's name of the forked repository>#<branch name>  --save-prod

For instance, if your Github's user name is "johndoe", and you forked https://github.com/aurelia/framework, and you made a branch named "mycoolbranch" containing your changes, then it would be:

$ npm install johndoe/aurelia-framework#mycoolbranch --save-prod

Note that the --save-prod flag could be replaced with --save-dev if the dependency is just for development.