215

I'm using the node_swiz module, which in turn uses the validator module.

I want to make changes to the validator module, but I used npm install to install the modules/dependencies.

Can I just make changes to the validator module inside of node_modules, or will that node_modules dependencies be re-created and the latest version gotten when I publish to heroku or next time I run npm install?

The structure looks like this:

myNodeApplication
  - node_modules
     - swiz
         - node_modules
            - validator [this is the library I want to edit]

Thanks for the help!

user1810875
  • 2,153
  • 3
  • 14
  • 5

4 Answers4

345

You can edit the file directly, but this would be overwritten whenever npm updates, the best thing to do is go straight to the source.

If the changes affect functionality of the overall module, and may be useful to others, you may want to contribute to the original source on github and look for the change to be implemented.

If this is proprietary functionality that is needed, and would not help the development of the module, the best thing to do is fork it from github and make your changes. You can install items directly from github using NPM, and this method would let you integrate future changes in to your custom version from the original source.

To install directly from github, use the following command:

npm install https://github.com/<username>/<repository>/tarball/<branch>

ctholho
  • 801
  • 11
  • 18
Sdedelbrock
  • 5,192
  • 1
  • 18
  • 13
  • 3
    Thanks! That's exactly what I wanted to know. Also, for others reading this... I wanted to include the module that's on my github in the package.json file, and there's info here about that: http://stackoverflow.com/a/8306715/1810875 – user1810875 Nov 09 '12 at 18:31
  • 44
    before forking I am changing it in the local system, but the change does not seem to affect. Changing any javascript file which is node_modules/package_name/lib/file_name.js does affect? – inquisitive Apr 16 '15 at 13:04
  • 4
    Just a note, not sure if something has changed but personally I had to specify the Git URL as git://github.com//.git" – Craig Jun 04 '15 at 19:55
  • fwiw the `https://github.com/...` url worked for me, and to save it to `package.json` i just added `--save-dev` option to the npm cmdline – bhu Boue vidya Oct 04 '15 at 05:26
  • But then if you change the code installed under node_modules, there's no way to commit the change back to the cloned repository. correct? – eugene Sep 22 '16 at 02:21
  • That's right. You'd have to check out the cloned repository, make your changes and commit them, then run npm install to get the latest version in your original project. – Coupey Oct 18 '16 at 08:13
  • 1
    Does anyone know of an easier way other than the above comment? I'd like to edit changes of an installed npm module, while occasionally doing upstream pushes via git, without having to reinstall the package after every change. –  Apr 03 '17 at 19:30
  • 5
    @JohnDevor Instead of installing the customized module, use the "npm link" command to just create a sym-link to its folder: https://docs.npmjs.com/cli/link – Venryx Jun 06 '17 at 10:09
  • 1
    I did this but then when running it says 'cant resolve package'. I see it in my package.json though, do I need to customize something else? – Adam Moisa Jun 08 '17 at 07:34
  • 7
    Figured it out, I had to navigate to the folder in `/node_modules` and run `npm install` then all is well! – Adam Moisa Jun 08 '17 at 08:05
  • Can anyone answer my question https://stackoverflow.com/questions/50239986/changes-made-in-files-under-node-modules – Krishna May 28 '18 at 09:59
  • just to let you know that `npm update` doesn't change the file. You have to `npm install ` to overwrite your changes – João Pimentel Ferreira Feb 24 '19 at 20:09
  • lets say if someone wanted to change a npm pakcage.. What file he should change ? there is esm5 folder, fesm5, esm2015, fesm2015 and a whole other lot – ALPHA Apr 23 '19 at 10:59
  • @THEWOLF =2, that is like asking what you should say if you wanted to make a comment... – Superole Jul 29 '20 at 07:59
  • If you fork the project and push to a new branch then instead of **master** in the end of the path add **your branch name** – Pontios Sep 24 '20 at 14:11
  • For local modifications to take effect when building with angulars `ng serve` / webpack you might also have to disable the build cache. Do so by setting `$env:NG_BUILD_CACHE=0` or configuring the `cli.cache` settings in your angular.json – icyerasor Jan 27 '22 at 12:48
190

You can use patch-package to make and persist changes to node modules.

This can be done by first making changes to the package inside node_modules and then running the following command, with <package name> being the name of the package you just made changes to.

npx patch-package <package name>

patch-package will then create a patches folder with a file inside, representing your changes. This file can then be commited to git, and patches can be restored later by running npx patch-package (without any arguments).

Optional step:

Add the following in the script section of your package.json to automatically patch the dependency when you execute "npm install".

"postinstall": "npx patch-package"
Pedro Fracassi
  • 3,342
  • 2
  • 16
  • 33
  • 4
    Very nice solution which worked for me without any issues. – 今際のアリス Jul 20 '20 at 13:04
  • 3
    this is really cool! FYI: I had to use "preinstall" instead of "postinstall" because my patch was to the postinstall script of the dependency. How would you implement that if you had other patches that needed to be applied in postinstall phase? – Superole Jul 29 '20 at 09:16
  • 3
    Incredible answer, I needed to make modifications to a dep before deploying to netlify. preinstall 'npx patch-package' was the magic ticket. The proper image is now shown on the website. – TheBetterJORT Aug 01 '20 at 01:31
  • 3
    Awesome answer! Thanks. Note that if your "change" in the package is in its `package.json` (e.g. updating an outdated fixed version dependency), you need to do `npx patch-package --exclude`. By default, it doesn't pick up the changes in `package.json` of sub-package. – Aidin Apr 01 '21 at 01:20
  • Good solution! This article goes into more detail about using patch-package: https://callstack.com/blog/say-goodbye-to-old-fashioned-forks-thanks-to-the-patch-package/ – ChrisW Jul 16 '21 at 21:20
  • Thanks! I needed to make a one line edit to temporarily modify a package for testing purposes and `npm link` isn't working in 11.x Angular so this made it easy. And I can reapply it (or not) for future testing. – saschwarz Jul 23 '21 at 14:25
  • Nice, this worked good for me even for subfolders inside node_modules modules. – Othmane Namani Dec 11 '21 at 10:02
  • works fine locally, but when you involve a CI it becomes cumbersome with errors... – Isaac Pak May 12 '22 at 15:50
  • @PedroFracassi So if I make changes to a 3rd party package and use patch-package, will my changes make it to my deployed web app? I assume patch-package will somehow run and take my changes into effect during the build process? Or is patch-package only for applying my changes when serving locally? – Kyle Vassella Jul 01 '22 at 10:05
  • 1
    @KyleVassella yes! patch-package is ran in the post-install script, so every time you run npm install, it patches the package. It'll run during your build process. – Pedro Fracassi Jul 01 '22 at 22:14
24

I didn't want to publish a new module and I also didn't want npm install to overwrite my changes. I found a solution to both of these issues, but it would probably be better to take @Sdedelbrock's advice. But if you want to do it, here's how:

  1. Edit your package.json file to remove the dependency you want to edit.
  2. Go into your project's /node_modules and move the folder somewhere else in your repository that can be committed. So now /node_modules/dependency is at /dependency
  3. cd into the dependency directory and type npm link
  4. cd into the root of your project directory and type npm link dependency It is important that you do this outside of /node_modules and /dependency

If everything worked, you should now have a symlink that was created in /node_modules/dependency. Now you can run your project to see if it works.

Daniel Kaplan
  • 62,768
  • 50
  • 234
  • 356
  • 2
    Cons: 1) You can never update the package version, even if it has security issues. 2) If you (or your future developers) ever want to do so, they have to spend time and manually diff the entire package to find out what you have changed. 3) https://github.com/facebook/create-react-app/issues/5372 So, TL;DR: it can make your future self or teammates very frustrated. – Aidin May 18 '21 at 03:32
  • That's what I ended up doing, but just copy the whole thing to src and import from './dependency' without link. No matter what I messed with the codes inside 'node_modules' directly, I just couldn't see any change being reflected on npm start. So frustrating... – SYK Jun 20 '22 at 02:02
  • 1
    @Aidin Yep, that is why recommended the other answer, but I'm glad you wrote that out since I didn't think to. Thanks! – Daniel Kaplan Jun 22 '22 at 07:02
  • Thanks! That's the way to go if one just wants to make some small quick change in the dependency. Cloning a repo in order to do such thing is a misunderstanding and overkill – user1234567 Feb 15 '23 at 10:41
  • Actually you don't need to remove dependency from `package.json`. In my case it caused build issues later. I've just edited this package.json entry, and instead of package version you need to specify path to your local library (like `"package_name" :"file:your_path/to_local_lib",`). – maveriq Mar 14 '23 at 23:57
  • @maveriq these steps change the `package.json` in the same way. I'm not sure what the difference is (literally; I don't know). – Daniel Kaplan Mar 15 '23 at 00:01
  • @DanielKaplan got you, in my case `package.json` wasn't updated automatically after these steps – maveriq Mar 15 '23 at 00:03
10

Fork the Github repo and make the necessary changes then you can install the package like

npm install git+https://github.com/visionmedia/express.git
el2e10
  • 1,518
  • 22
  • 22