I do not know why I feel insecure of the things that I am about to do, and I always seek for some advice in the community before doing my move.
Have you used bower and/or npm, they have this cli commands: bower init or npm init that initiates creation of bower.json or package.json files respectively. And now it asks me for a version number. FOllowing semver.org tells me that during development 0.y.z is the way to go. Now after doing npm init, how do you update the version number? by manually editing the package.json? and doing a commit?
Related
I have a problem that when I clone a Github repository that is older more then half a year I am not able to run it with neither npm start nor yarn start. I have been successful with one repository only and it was only a few months old. I think it might be because of the new React version. I am quite new to React so I don't know for sure.
I always get an error message that looks something like this
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"babel-jest": "^26.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of babel-jest was detected higher up in the tree:
/Users/username/node_modules/babel-jest (version: 27.5.1)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "babel-jest" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:
5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
6. Check if /Users/username/node_modules/babel-jest is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls babel-jest in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed babel-jest.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Even after following all 7 steps, I am still getting the same result. What should I do??
I just started working with vscode and npm/git. Someone on my team added a package and I did a pull to get his latest changes which put that package in my package.json file. When I ran the project I got errors for a module not being found. Obviously I need to install that package locally. Do I simply use npm install w/no arguments to get it? Or do I install it manually myself with npm install and version info? I ask because I don't know if npm install w/no args will create a new package.json or cause any issues.
What is the correct way to get a new package installed that someone added in the repo?
npm install can be run as many times as you like, and is what you should be doing here :)
npm install's purpose is to get your node_modules folder up-to-date with whatever is written in package.json
So, if your colleague has changed package.json (by installing something new and pushing the change to git), you can just run the command again to get up-to-date.
Provided you haven't directly fiddled with any files in node_modules (this folder should be left alone), it is always safe to run npm install as many times as you like, even if nothing has changed.
How to upgrade packages in react application automatically using commands? I don't want to manually check every library in package.json and check its latest version. I want to upgrade my package.json at one shot.
npm i -g npm-check-updates
ncu -u
npm install
Looks like npm-check-updatesis the only way to make this happen now.
Upgrading libraries, frameworks in Javascript project is surely a tiresome and complex process. However, it has much more benefits in the long run and stability .
Here are the main reasons why upgrading libraries are important:
🚀 New features: Most dependencies have a clear roadmap for new features.
🏎️ Performance improvements: In addition to new features, performance improvements are also made frequently.
🐛 Fixed bugs: Although it is normal to find bugs in libraries that you depend on, patch releases help fix these issues.
👮 Security patches: Security patches are one of the most important reasons to have your libraries up-to-date.
The manual process is too tiresome as you need to check for the latest version of each package. So make it easier we will be using two separate methods.
Using npm-check-updates
npm-check-updates upgrades your package.json dependencies to the latest versions, ignoring specified versions.
Please follow the steps below -
Install npm-check-updates
Run npm-check-updates to list what packages are out of date
Run npm-check-updates -u to update all the versions in your package.json
Run npm update as usual to install the new versions of your packages based on the updated package.json
If you do not want to install npm-check-updates in machine, you can follow the steps below-
run npx npm-check-updates (This will list down all the outdated packages in package.json)
Run ncu -u to upgrade package.json
npm install to install the packages
📌 Check your project by running the application and verifying the up-gradation. There might be issues in your code that might as part of up-gradation. In such scenario please check the release notes of the package and make the due changes in code.
I'm working on an NPM package right now.
The main code for the package (repo/src/maincode.js) has a few dev dependencies and a few dependencies needed to run it. When the user installs the npm package (through npm i) these dependencies will need be installed.
Now, that being said, I also want to create a react project that showcases this npm package, and have it live in the same repo, in an examples directory (repo/examples/react/app.js). This react app may have its own dependencies and dev dependencies, but I really don't want all of these to be forced onto the user when they're installing my npm package just to use in their projects.
How might I go about solving this problem? Is there a way to create a set of dependencies that are only installed if you are running a particular script, or running example code ?
You can give the examples directory its own package.json file and instruct folks who want to run the examples to cd into the examples directory and run npm i there. Any code in the examples directory that imports a module will look in its own node_modules before checking the node_modules in the parent directory.
The MarkoJS examples repository takes this approach and even makes it more granular. Instead of having a single package.json for the examples directory, there is a package.json for each separate example.
If you want, you can create a helper script in the main package.json for the user so they can do something like npm run build-examples and it will do the npm install for them as part of the process.
First time user of npm and bower. I am able to install packages correctly but I am not sure how the dependencies work? As an example, I did "npm install angularjs" in my application root which created a folder "node_modules/angularjs/" with some files in it. I can also see that there is a package.json file within the angularjs folder, and it looks like it has not been processed as there is numerous packages listed in it and not installed.
Long story short, should I install all these packages manually or is there a built in feature that npm/bower can also process these sets of dependencies?
UPDATE:
I greatly lack the ability to ask precise questions, I apologise to those who have answered and did not give the correct sypnosis.
What I expect to happen:
Using npm or bower, I want to clarify that if I do an install of one of their packages, will it automatically also install the new package's dependancies or would I need to do a npm/bower install for each of the packages.json or bower.json files manually?
What I did to try make it work:
Created folder D:\Websites\TestSite
Within the folder through CMD, I did a "npm init" and ran through the guide
I followed that up with a "npm install angularjs"
A new folder was created D:\Websites\TestSite\node_modules\angularjs and within this folder there was a "index.js" and package.json file
Opening index.js I get a "require("angular");" and module.exports = window.angular.
The package.json file contains a number of dependancies which has not been installed.
My Result:
As per my expectations, npm install in point 3 above did not install the dependancies of the package.json file after it installed angularjs.
I am not sure but I assume that the index.js file needs to be included in my html and that it required the requirejs library initiated? If this is the case, then requirejs (which I do not have installed on my site) should be a dependancy for angularjs to work, and should be installed prior to giving me the ability to try and initiate it?
Am I missing a step or misunderstanding the functionality of NPM/Bower? Thank you for your patience!
Npm and Bower are great tools for managing your dependencies, i'll try to make it clear in a few words.
In general npm is used for managing your back-end dependencies and Bower is responsible for your front end dependencies.
There are 2 config files:
package.json, here are listed your dependencies that are not used in browser(e.g. bower, grunt). To install all dependencies in package.json run npm install.
Bower.json, here will be listed your "in browser" dependencies(e.g angular, jQuery). Run bower install to install all dependencies listed here in bower_components
You can find a extended guide i wrote here.