9

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 : vue-youtube@1.4.0
  • 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...)

vicovicovico
  • 358
  • 1
  • 4
  • 16
  • 1
    What you describe should work. Did you remember to commit the `patches` directory? Or perhaps there are more than one vue-youtube versions installed in your node_modules and it's using a different one than the one you patched? (You can do `npm ls vue-youtube` to see the installed versions.) – Trott Oct 23 '20 at 12:02
  • @Trott, well I did not commit my changes, as I want to test them properly before, and it should not be needed as I am working in local ? (I edit my file in local, and then test my vue.js app in local with npm run serve). Just in case, I tried to commit the patches directory, but it does not change the behaviour.. I edited my message with more information (package.json issue ?). thank you for your help ! – vicovicovico Oct 26 '20 at 10:28
  • 1
    I'm facing the same issue. Any news? – Monique Altero Nov 06 '20 at 00:34
  • @MoniqueAltero, what I noticed in my Edit2 is that when I edit the files in the `dist` folder of the package, it is indeed working. I commit my patch, and everytime someone somewhere pull & deploy the app, the patch is indeed applied to the file in `dist`. This worked for my case because the `vue-youtube` package is small and understandable even in the dist folder. However, I don't know if it is the normal behaviour of patch-package (do not build the package from src folder, just patch the dist folder). – vicovicovico Nov 06 '20 at 07:24
  • 2
    Just had the same issue only the folders were `lib` and `es` I needed to change the `es` files and had updated the wrong set of files. Your Edit 2 helped me solve this, you should add it as an answer – James Mar 31 '21 at 10:36
  • @JamesBarrass, not sure I understand you. Should I add to my edit that the folder can be `lib/es` also instead of `src/dist`, or that my Edit 2 is the answer, that we were actualy editing the wrong files ? – vicovicovico Apr 08 '21 at 07:10
  • 1
    Edit 2 is the answer – James Apr 08 '21 at 10:28
  • Ran into this issue while patching a package: `Request failed \"401 Unauthorized\` I have deleted the registry and npmrc still no luck – Gaurav Soni Feb 10 '22 at 04:04

5 Answers5

10

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

vicovicovico
  • 358
  • 1
  • 4
  • 16
  • 1
    Thank you man! Saved me from a stroke, after researching 2 hours, and trying different approaches, fork-clone, install from own repo... etc. Hell yeah, thank you again – Benji Dec 21 '21 at 13:21
  • 1
    but it's impossible to write in min.js format. do you have any other ideas? – glushkina1 Jun 21 '23 at 14:19
4

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.

prodeveloper
  • 943
  • 14
  • 22
2

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.

Martín Capello
  • 31
  • 3
  • thanks for your input. Please also note that with your method you won't be able to share your modifications with potential coworkers – vicovicovico Apr 30 '22 at 08:08
  • 1
    Oh, that's right. I thought you were asking for testing changes locally. I'll edit my answer with a better solution to enable sharing. Thanks! – Martín Capello May 02 '22 at 12:45
0

Take a look at this answer, it may help. https://stackoverflow.com/a/71153240/9981565

For me it was happening because of version mismatch between package.json intended version of package and yarn.lock / package-lock.json

Amaar Hassan
  • 338
  • 2
  • 7
0

For those who's using NextJS, delete folder caches in .next folder

glushkina1
  • 164
  • 2
  • 15