Editing code of react npm modules in node module folder

Question

Is it possible to change code of npm modules in the modules folder? I assume this is not recommended practice, are there any other ways achieving this? Currently, I tried changing the code in the module's directory but the changes doesn't seem to apply. Thanks in advance.

Answer 1

You can also use patching.

In React Native world, that works quite reliably - so I would guess it would work also in React world and many other worlds that rely on npm.

Patch-Package

is a library that works both with npm, and yarn (note: for yarn, see their installation instructions). You can make patches to local folders, libraries in node_modules (also nested), or apply patches only for dev dependencies (ignore patches in production buils).

Link is just here: https://www.npmjs.com/package/patch-package

1.Making patches

First make changes to the files of a particular package in your node_modules folder, then run

npm patch-package package-name-where-you-made-changes
// or
// yarn patch-package package-name-where-you-made-changes 

If you are trying to patch a nested package at, e.g. node_modules/package/node_modules/another-package you can just put a / between the package names:

npx patch-package package/another-package

It works with scoped packages too.

npx patch-package @my/package/@my/other-package

2.'/patches' folder

If this is the first time you've used patch-package, it will create a folder called patches in the root dir of your app. Inside will be a file called package-name+0.44.0.patch or something, which is a Git diff between a normal old package-name and your fixed version.

3.Sharing patches with the team

Simply, commit files (patches) in the 'patches' folder to the repo.

When other team-member (or CI service) runs npm install, patches are executed automatically (using npm post-install script underhood) - see patch-package official docs, if you want to customize this behavior (e.g. exclude some patches, etc).

4.TIP:

If the package is hosted at Github (and you are logged in), you can run the same patch-package command with --create-issue param, so it will automatically create a pull-request with the applied patches in the main repo (so the maintainers could fix the issues):

npm patch-package package-name-where-you-made-changes --create-issue
// or
// yarn patch-package package-name-where-you-made-changes

5.TIP:

To revert patches, run it with --reverse param:

npm patch-package package-name-where-you-made-changes --reverse

Answer 2

Of course you can change the contents of packages in node_modules as it's a standardized format. However, you shouldn't do that because you should be committing your changes and redistributing them.

Unfortunately, the solution to this is kind of non-trivial and it's something I've struggled with in the past.

npm link

The first approach is to clone the repo locally and use npm link to use it in your project.

npm link ../path/to/my/proj

The drawback with this approach is that you still have to manually download the repository to use it and npm link makes your linked version the package to use globally on your system which may have unintended side effects. That being said, npm link is probably the best approach if you want to locally test changes to your package and contribute them upstream.

Use a forked git repo

You could also directly install it from a forked git repo by doing:

npm install --save $GIT_REPO_URL

But with this approach, you need to have the credentials to access the git repo and thus additional complexity arises when you are dealing with private repos and the such, particularly when dealing with CI environments. Also, you should include a commitish so that you can get reproducible builds -- it's sort of a pain to develop this without using npm link, though. You can consult the npm documentation for other install options or for more specifics. This is a pretty good approach if you don't have to worry about any of those things.

Local npm module

Once you've made your changes, you could also install the forked version into your project like so:

npm install --save ../path/to/my/proj

However, then, you'd effectively have the other NPM project a part of your project with something like git submodules, git subtrees, or using a monorepo. This may be a good approach for a team, but is probably overkill for what you're trying to do and there's seriously a lot of tooling that you need to think about to make this a good approach.

Publish your own npm module

Unfortunately, all the prior approaches kind of assume that the packages either do not have a build process or that they get built automatically with something like npm's postinstall scripts. However, some npm modules are written by publishing a specific build directory, making what's on npm significantly different from the source.

In these cases, you need to publish your builds to somewhere that npm can install from. This includes things like a public scoped package, a private npm repositories, or publishing your npm module to a personal artifact server.

Answer 3

It is not recommended to modify packages in node_modules directly, since your changes will be gone when you reinstall the package, and you can't share your changes with others. Consider e.g. forking the project on GitHub and make your changes there, and use that as the package instead.

It still works to modify packages in node_modules if you just want to experiment. If the main field of the package's package.json points to a build file, you might have to change this field to the source entry file instead, or build the files yourself after every change in the source.

Answer 4

For me te best approach is, as like @Kevin Raoofi said, clone the package and publish my own, then download mine in a specific folder, where there are only "myNpmPackages".

Then:

• in your project, install your clone
• put "*" in your json in order to have always the pkj updated
• edit the package (in your "myNpmPackages" folder)
• change the version number
• npm publish
• in your project, npm install