Can I modify a package from node_modules? - javascript

I use react-redux-snackbar I want to improved the style into this package, I modify the package from node_modules but nothing happens.
When modify node_modules into the folder of this plugin, I would like to mmodify the stylesheet but nothing happens.
Do you have any recommandations, like fork the project and create my own plugin ?

the approach I used for this was to keep a pre-built customised copy in my source tree, and then clobber the module version with it:
"scripts": {
"postinstall": "cp -r ./src/mycom/lib/tinymce/* ./node_modules/tinymce/",
this works after npm -i and in e.g. CI setups. I forked the repo for the lib (tinymce) that i was having trouble with, edited its source, and then built it.
i don't know the npm lib file/folder structure at all really but i copied the ./js folder content into my lib folder and from there into node_modules at install time and it seems to work.
don't forget to tell your linter to ignore your lib folder also e.g.
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}' --ignore-pattern 'src/mycom/lib' --quiet",
"lint:fix": "eslint 'src/**/*.{js,jsx,ts,tsx}' --ignore-pattern 'src/mycom/lib' --fix --quiet",

Yes, you can. Few options:
Submit a pull request on the project and wait for the author to
release it.
You can fork the project yourself on github and publish it.
Use a symlink by going to the source folder and using npm
link and then reference it in your project. Instructions.

If you want to update package in node_modules, you have to make your changes in project and you rebuild project in node_modules. The rebuild steps are probably in the Readme.md. But if you update project from npm install or other way, probably your project is gonna crash.

If you want some improvement in some dependency. This is the right time you can make a Pull Request to that repo. So it would be available to everyone using the same package. Most importantly if you're working in a team. We don't push node_modules in repo. Other members will download packages remotely so your changes will not be reflected there.
I hope you got my point.

Important thing you should know, whenever you are making change in node_modules folder, you need to rebuild your project to see its effect,
Now if you have modified node_modules and you restarted your server you will see changes
real issue will occur whenever in future you will try to do npm i it will automatically override your changes,
solution to this,
Fork project on your GitHub
Clone project on your system
Create two branches stable-verison & modified-version
Push your desired changes in modified-version branch
you will use stable-verison branch to sync latest changes from original repo
How you will use this modified-verion branch
there 2 ways,
Publish your branch as new package on npm
Use SHA commit hash to use directly in package.json
here is example for 2nd option
Open up your package.json file, and replace MODULE, USER, REPO, and SHA with the info from the GitHub repo.
"MODULE": "https://github.com/USER/REPO/commit/SHA",
in your case:
"react-redux-snackbar": "https://github.com/yourUser/react-redux-snackbar/commit/Your-Modified-Commit-SHA"
i hope this works for you

to update a package you nromally run something like npm install react-redux-snackbar#latest

Related

how to change the code of other modules in nodejs

For example.I installed a module in the node_modules. if i change that module, updating node_module will update all modules.What is the usual practice
Look into patch-package
In summary, you install the package and add a postinstall script to your package.json file that calls patch-package:
"scripts": {
"postinstall": "patch-package"
}
Modify the package directly in /node_modules and then call patch-package on the package you just modified:
npx patch-package <package_name>
This will create a local directory called /patches with a diff (or patch) file inside for that package. Commit that folder in with your repo.
Now whenever you run npm install, the postinstall script will also run and apply the /patches that you committed to that package 🙌🏽
First, We call it Package instead of Module, Why? because search results on Google are much more accurate when you use that word
Second, to update a specific package use npm update {package name}
Third, you don't change the code of other packages, you can only either install, update, or delete the package. there's this option to override it but it's only possible if the package owner allows overrides.
Update
I decided to update my answer due to the discussion below.
since I have put in mind that you are a beginner and are not entirely sure how to update code or override package code, or maybe even if it's a good idea to change package code, I have given you an unclear answer.
and since the other answer are telling you to use patch-package
then I'm here to tell you that you can fork that package. and install that package from your fork. here's how you do it

Npm local dependency will generate a new package-lock.json with any install

We have an old legacy app, and a relatively small package we wanted to integrate in it. To make the whole process with less overhead as possible, we decided to do that by installing the package from the repo itself.
For example, our structure looks like that:
- BigApp
- SmallPackage
- package.json
- package.json
And so, the BigApp package.json has the following dependency:
SmallPackage: "file:./SmallPackage"
Now everything works great, up until we noticed that upon every npm install a new package-lock.json is created. That is an unwanted side effect since nothing has really changed.
I can't think of another reason for that but the fact that we used this local install path.
Can anywone come up with an idea why it happend?
Btw, I heard about npm ci - does it fit this scenario?
Thanks
package-lock.json is generated by default in recent versions of npm. It is not because you are installing from a local path or anything like that.
If you don't want the benefits of a package-lock.json file, you can run npm with --no-package-lock or put package-lock=false in a .npmrc file in the project root. You can also delete package-lock.json or you can ignore it.
npm ci depends on package-lock.json or npm-shrinkwrap.json, so if you want to use npm ci, you probably want the package-lock.json file.

how do i run jest test on a node_modules folder in react

I have added my own another project as a dependency. now it's on the node_modules folder now
how do I run test file on that folder when running the npm test
I don't know what your needs are but this is wrong.
If you want your project to be a dependency there are other safest ways to do that.
For example, with yarn, you can install a package from your computer as a dependency.
Consider the following example: you have your main-project, in which you want to include your sub-project.
So, in your main-project directory you can run yarn add ../path/to/sub-project and yarn will copy the code of your sub-project into the main-project. In this way you can keep the code splitted in two different reporitories.
A better way, if your sub-project is on github, bitbucket or whatever, is to give to yarn the url of your repo.
Yarn will automatically clone the repo into your node_modules every time that you'll run yarn. You can also specify a specific commit to use.
Read more about that in the yarn documentation.

Node.js project with no package.json

Is it ok to have a node.js project with no package.json? The ones I see on the internet all come with package.json
What is the effect of having no package.json?
How is package.json created in the first place? Is it created automatically? I am wondering why I do not have package.json
Fundamentally, package.json is a meta file for your application. It lists all the configuration of your application.
What is the effect of having no package.json?
Nothing as far as you're running all your code locally and have no requirement for deployment whatsoever.
Let's setup a scene for you to understand this better.
Imagine that you wrote a brilliant application using node. Now all the chicks in your surrounding want it to play with. It is so fantastic!
Now you want to give it to them and during the development process you `npm install`ed so many things that your project grows beyond 4TB size.
There is no data storage device available to ship that huge code base.
Then the girl of your dream said I want it and I want it now. So you begin searching for app deployment process for node applications.
That is where you stumble upon a magical thing called package.json.
So what you do is you list all your npm installed modules under dependencies property. Then you delete node_modulesfolder, add package.json and commit the entire damn thing in github. Even the .zip file is of 10MB
Then she gets the code.
Types in npm install && npm start (which will install all the dependencies from the package.json` and start your application)
If you have package.json however, that is where you specify all your dependencies.
Using --save flag of npm install
Example.
npm install express --save
How is package.json created in the first place? Is it created automatically?
You can manually create a text file and save it as package.json
OR
A more sophisticated way is to use the command
npm init
I am wondering why I do not have package.json
Me too! :)
You're most probably following a tutorial that doesn't emphasize on initial configuration of the project OR the author of those tutorials presume that the reader has all the fundamentals down to begin with.
It is created automatically if you write npm init.
Then, every package you add using npm install packagename --save will be added to the dependencies list.
You need package.json so that when you want to use your project on another machine you don't have to copy all node_modules, but only your .js files you have written, assets and package.json. You can then run npm install command and it will automatically download and install all the required modules (found in the list of dependencies inside package.json).
You can also manually create or edit it, but it's easier to add --save when installing a module so you don't have to worry about package versions and stuff like that.
Also if you want to create a npm package, an open source project or stuff other people will use, it's either required or the norm to have this package.json file describing your project.
package.json is npm file, if you don't use npm you will not have this file, npm is a great tool if you want to use external libraries in your project but if you don't need it (which is very not likely unless you are doing something very simple), you don't need package.json file too.
To generate package.json file initialize npm in your project using npm init
possible reason thus it exist is you maybe you enter a wrong command like npm i -y, you must initialize the project first, just enter a command npm init -y
Welcome.
Well, if you are running it on your local machine, it's fine. now to answer your last question, package.json is not created automatically.
the npm command npm init -y creates the 'package.json' file. It basically makes sharing your code and installing your codebase easier.

Installing a local module using npm?

I have a downloaded module repo, I want to install it locally, not globally in another directory?
What is an easy way to do this?
you just provide one <folder> argument to npm install, argument should point toward the local folder instead of the package name:
npm install /path
From the npm-link documentation:
In the local module directory:
$ cd ./package-dir
$ npm link
In the directory of the project to use the module:
$ cd ./project-dir
$ npm link package-name
Or in one go using relative paths:
$ cd ./project-dir
$ npm link ../package-dir
This is equivalent to using two commands above under the hood.
Since asked and answered by the same person, I'll add a npm link as an alternative.
from docs:
This is handy for installing your own stuff, so that you can work on it and test it iteratively without having to continually rebuild.
cd ~/projects/node-bloggy # go into the dir of your main project
npm link ../node-redis # link the dir of your dependency
[Edit] As of NPM 2.0, you can declare local dependencies in package.json
"dependencies": {
"bar": "file:../foo/bar"
}
npm pack + package.json
This is what worked for me:
STEP 1: In module project, execute npm pack:
This will build a <package-name>-<version>.tar.gz file.
STEP 2: Move the file to the consumer project
Ideally you can put all such files in a tmp folder in your consumer-project root:
STEP 3: Refer it in your package.json:
"dependencies": {
"my-package": "file:/./tmp/my-package-1.3.3.tar.gz"
}
STEP 4: Install the packages:
npm install or npm i or yarn
Now, your package would be available in your consumer-project's node_modules folder.
Good Luck...
Neither of these approaches (npm link or package.json file dependency) work if the local module has peer dependencies that you only want to install in your project's scope.
For example:
/local/mymodule/package.json:
"name": "mymodule",
"peerDependencies":
{
"foo": "^2.5"
}
/dev/myproject/package.json:
"dependencies":
{
"mymodule": "file:/local/mymodule",
"foo": "^2.5"
}
In this scenario, npm sets up myproject's node_modules/ like this:
/dev/myproject/node_modules/
foo/
mymodule -> /local/mymodule
When node loads mymodule and it does require('foo'), node resolves the mymodule symlink, and then only looks in /local/mymodule/node_modules/ (and its ancestors) for foo, which it doen't find. Instead, we want node to look in /local/myproject/node_modules/, since that's where were running our project from, and where foo is installed.
So, we either need a way to tell node to not resolve this symlink when looking for foo, or we need a way to tell npm to install a copy of mymodule when the file dependency syntax is used in package.json. I haven't found a way to do either, unfortunately :(
Missing the main property?
As previous people have answered npm i --save ../location-of-your-packages-root-directory.
The ../location-of-your-packages-root-directory however must have two things in order for it to work.
package.json in that directory pointed towards
main property in the package.json must be set and working i.g. "main": "src/index.js", if the entry file for ../location-of-your-packages-root-directory is ../location-of-your-packages-root-directory/src/index.js
So I had a lot of problems with all of the solutions mentioned so far...
I have a local package that I want to always reference (rather than npm link) because it won't be used outside of this project (for now) and also won't be uploaded to an npm repository for wide use as of yet.
I also need it to work on Windows AND Unix, so sym-links aren't ideal.
Pointing to the tar.gz result of (npm package) works for the dependent npm package folder, however this causes issues with the npm cache if you want to update the package. It doesn't always pull in the new one from the referenced npm package when you update it, even if you blow away node_modules and re-do your npm-install for your main project.
so.. This is what worked well for me!
Main Project's Package.json File Snippet:
"name": "main-project-name",
"version": "0.0.0",
"scripts": {
"ng": "ng",
...
"preinstall": "cd ../some-npm-package-angular && npm install && npm run build"
},
"private": true,
"dependencies": {
...
"#com/some-npm-package-angular": "file:../some-npm-package-angular/dist",
...
}
This achieves 3 things:
Avoids the common error (at least with angular npm projects) "index.ts is not part of the compilation." - as it points to the built (dist) folder.
Adds a preinstall step to build the referenced npm client package to make sure the dist folder of our dependent package is built.
Avoids issues where referencing a tar.gz file locally may be cached by npm and not updated in the main project without lots of cleaning/troubleshooting/re-building/re-installing.
I hope this is clear, and helps someone out.
The tar.gz approach also sort of works..
npm install (file path) also sort of works.
This was all based off of a generated client from an openapi spec that we wanted to keep in a separate location (rather than using copy-pasta for individual files)
======
UPDATE:
======
There are additional errors with a regular development flow with the above solution, as npm's versioning scheme with local files is absolutely terrible. If your dependent package changes frequently, this whole scheme breaks because npm will cache your last version of the project and then blow up when the SHA hash doesn't match anymore with what was saved in your package-lock.json file, among other issues.
As a result, I recommend using the *.tgz approach with a version update for each change. This works by doing three things.
First:
For your dependent package, use the npm library "ng-packagr". This is automatically added to auto-generated client packages created by the angular-typescript code generator for OpenAPI 3.0.
As a result the project that I'm referencing has a "scripts" section within package.json that looks like this:
"scripts": {
"build": "ng-packagr -p ng-package.json",
"package": "npm install && npm run build && cd dist && npm pack"
},
And the project referencing this other project adds a pre-install step to make sure the dependent project is up to date and rebuilt before building itself:
"scripts": {
"preinstall": "npm run clean && cd ../some-npm-package-angular && npm run package"
},
Second
Reference the built tgz npm package from your main project!
"dependencies": {
"#com/some-npm-package-angular": "file:../some-npm-package-angular/dist/some-npm-package-angular-<packageVersion>.tgz",
...
}
Third
Update the dependent package's version EVERY TIME you update the dependent package. You'll also have to update the version in the main project.
If you do not do this, NPM will choke and use a cached version and explode when the SHA hash doesn't match. NPM versions file-based packages based on the filename changing. It won't check the package itself for an updated version in package.json, and the NPM team stated that they will not fix this, but people keep raising the issue: https://github.com/microsoft/WSL/issues/348
for now, just update the:
"version": "1.0.0-build5",
In the dependent package's package.json file, then update your reference to it in the main project to reference the new filename, ex:
"dependencies": {
"#com/some-npm-package-angular": "file:../some-npm-package-angular/dist/some-npm-package-angular-1.0.0-build5.tgz",
...
}
You get used to it. Just update the two package.json files - version then the ref to the new filename.
Hope that helps someone...
I came across different solution than above while installing custom build package for CKEditor5.
So I uploaded package to app root directory, than:
npm add file:./ckeditor5
In my package.json package is listed as a file:
"ckeditor5-custom-build": "file:ckeditor5",
I think this answer could be relevant to the topic on how to add local package.
For installing local module / package, that not yet on npm or you are developing an npm package and want to test it locally before publishing it. You can try this -
npm i yalc -g
Go to the module/package folder then -
yalc publish
Your packakge is ready to use, now go the project you want to install it -
yalc add <Your package name>
Package will be installed to you project. If you want to remove it -
yalc remove <Your package name>
For more recent versions of npm (I'm using 8.1.3 under macOS Big Sur), the sequence of commands is even easier...
cd /path-where-your-local-project-is/
npm init
This will ask you for some data related to your project and properly initialises your project.json file.
Once that is done, you can install additional modules with:
cd /path-where-your-local-project-is/
npm install --save-dev some-npm-module .
That's all you need!
Note: I believe that the trailing dot is not necessary if you're inside the project directory, but I also think that it doesn't hurt to add it :-)
(I wonder why the official docs still don't explain this...)

Categories

Resources