I am a beginner with git and node. So I created a new repository in git, and installed react and babel, and git is telling me that the repository is too large. Literally all I did was run something like this:
created index.html
created app.js
> npm init (initialized package.json)
> npm install --save react react-dom
> npm install --save-dev babel_preset_react
> npm install --save-dev babel_preset_es2015
added babel config to package.json
Maybe I'm missing something, but I haven't even built anything yet, and I'm already getting complaints that my repo is too large. Git desktop is even throwing OutOfMemory exceptions! So I wondered, maybe I'm not supposed to check in the node_modules folder. Then I read this:
https://web.archive.org/posts/nodemodules-in-git.html
But I am even more confused now. The article says you should check in node_modules for projects that you deploy. But doesn't that mean it's still going to be a "large repository?"
At the bottom, the article says not to add node_modules to gitignore. I think gitignore just ignores the files in that folder from being committed to git. So is this telling us to not ignore node_modules? As in, check-in node_modules?
And what is that $ npm rebuild on deploy?
As a beginning to npm and git, can someone explain what I should do in simpler terms?
I just checked the link you shared is broken. We never check-in node_modules to repositories they easily add LOT of MBs to the overall size. Please add the node_modules in .gitignore. You should only checkin package.json to your repository. This is how my .gitignore in AngularJs project looks like,
.idea
node_modules
dist
npm-debug.log*
.DS_Store
If you are worried about the breaking changes due to version upgrade please specify the "~" sign in front of the version no. of packages (package.json) so only the patches will be considered.
Ex.,
"angular": "~1.5.6"
you don`t need to push node_modules into your repo . Add node_modules to gitignore and when you deploy your code on the server you have to install node_modules over there using command :
npm install
As your package.json is updated when you locally install node_modules and it is pushed to repo . When you run npm install on the server , all your packages will be installed which are mentioned in package.json
Related
I am trying to install react using this command: npx create-react-app .
Then I tried to run using this command: npm run start
Then I get this error:
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:
"webpack-dev-server": "3.10.3"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack-dev-server was detected higher up in the tree:
C:\Users\oa\Desktop\node_modules\webpack-dev-server (version: 3.11.0)
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.
As suggested here [https://stackoverflow.com/questions/42308879/npm-err-code-elifecycle][1] ,
I have tried to fix it using the following commands:
delete package-lock.json
npm cache clean --force
npm install
npm start
But did not fixed for me.
Just to let you know, my npm version is 6.13.6, and node version is v13.8.0
Try to create a .env file in the root directory of the project and add this line SKIP_PREFLIGHT_CHECK=true inside the file.
then try to run yarn start or npm start.
Did you give a project name after npx create-react-app 'appName' ?
If you have multiple node_modules folders with different versions of dependencies one may conflict with the other - do the following:
Follow steps 1-4 that are initially provided in project directory and commit updated changes locally~
i. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
ii. Delete node_modules in your project folder.
iii. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
iv. Run npm install or yarn, depending on the package manager you use.
Find the location of the node_modules folder that is not in your project folder ~ this line - (C:\Users\oa\Desktop\node_modules\webpack-dev-server)
Go there and delete it
once done try npm start
should work :)!
I am not asking about deploying Node.js app or how do I deal with node_modules package, I am talking about "upload" my own nodejs code to production server.
So far I have tried 3 ways, each with its own pros & cons
git clone. To reduce to the cloned stuff I use git clone --depth 1 -b release_branch. But still I got the files I do not need for deployment, e.g except for .git I also get documents (b/c I put documents in my git repo).
npm install. use npm install git+https://gitusername:gitpassword#myserver/path/to/repo.git. With proper package.json files setting I can get my source codes only, which is what I want. But the problem is the directory structure. After running npm install, the directory is like this,
.
├── node_modules
└── package-lock.json
My package is located inside node_modules alongside with its own dependencies.
npm pack. Then upload (scp in my case) the tgz file to server, then npm install tgz_file.tgz --production But it has the same problem with npm install git+https. It is probably better than npm install git+https b/c I can control my releases.
So is there other ways (simple) that I can get proper directory structure and source codes only ?
BTW, I know this nodejs express app deploying to production but their discussion is not the same as mine.
----- update -----
Now I am kinda sure npm install tarball has some bug, so I just tar xf & npm i I believe this is the simplest solution.
I decided to create React app under Linux and I've used those commands:
npm install -g create-react-app
create-react-app my_app_name
npm start
At this point I've recieved message:
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:
"webpack": "4.19.1"
Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:
/home/ktw/node_modules/webpack (version: 4.24.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If 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 "webpack" 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 /home/ktw/node_modules/webpack is outside your project directory.
For example, you might have accidentally installed something in your home folder.
7. Try running npm ls webpack in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed webpack.
I've done literally every step from this list but unfortunately - with no results.
I've already tried:
chown -R user: node_modules,
npm cache clean --force,
rm -rf node_modules && rm ./package-lock.json && npm install
and I have no idea what is going on.
Do you guys have any idea how to fix that?
It looks like you may have forgotten to do Step #3: Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
If you are doing the steps as you outline above, when you do npm install again, because Webpack is still in your package.json, it'll reinstall and continue the issue.
Node.js newbie here, Windows 10. I npm install-ed some packages (without -g) while inside a directory that didn't have package.json. npm placed the packages in C:\Users\{MyName}\node_modules\.
Now I'm seeing some weird behavior:
When I'm in my project directory (has package.json but no node_modules/ yet), npm list and npm list -g both show an empty list
When I'm in a non-project directory (no package.json)...
npm list -g still shows an empty list
However, npm list shows everything in C:\Users\{MyName}\node_modules\
Question 1. What is going on here? Apparently, npm's default global path should be C:\Users\{MyName}\AppData\Roaming\npm\. If so, why is it using C:\Users\{MyName}\node_modules\?
Question 2. How do I get out of this mess? Node.js has no problem importing packages from C:\Users\{MyName}\node_modules\, but I want npm to list them properly. How can I delete the semi-global packages, reinstall them correctly, and ensure that this doesn't happen again?
Welp, turns out I've been mistakenly npm install-ing packages without package.json. The first time I did this, I was in my home directory(C:\Users\{MyName}\). This caused npm to create node_modules/ and package-lock.json in the home directory. Further (mistaken) attempts to install packages in my projects--which were still missing package.json--caused npm to traverse upwards, until it found the initial node_modules/ dir, and install everything there. Because my home directory is among the places Node.js looks for modules, I didn't notice my mistake until now. :P
Not sure why it’s doing it, but the way to avoid it is to initialize your project directory using:
npm init
or if you don’t want to answer the questions:
npm init -y
That will setup the directory with the package.json and node_modules will be put there.
Ok, a couple of tips then...
when you install a package that you are going to use in production then add --save, e.g.
npm install --save some-package
this will automatically add the dependency to your package.json. If you are installing a package for use purely in development, e.g. chai, then use--save-devand it will add it to the development dependencies.
Also, git is your friend, even if you are only messing :)
Happy noding :)
For me the solution here was:
Go to c:\users[me]\AppData\Roaming\npm and delete the node_modules folder completely
Make sure I had the package.json file for the project
Delete the project package-lock.json file
Run npm init
Run npm install
Project then worked, not sure why the node_modules got to be in the folder above, ain't got time to find out.
I was trying to install this npm package from its github repo using this command:
npm install --save github:kpdecker/jsdiff
It looked like it went okay, because the diff folder got created inside node_modules but it didn't contain the lib or dist folders and none of its dependencies got installed. These were the only files that get copied:
runtime.js
release-notes.md
package.json
README.md
LICENSE
CONTRIBUTING.md
However, the command above works perfectly when installing other packages. For example:
npm install --save github:visionmedia/express
So, what am I missing. Is there some other command that I'm supposed to run to complete the installation of jsdiff?
This package needs a build step (see the gruntfile.js). So the artifacts (the files that will be generated at the build step wont be checked in the versioning system - git - you wont have to deal with them in your diffs and merge).
Also check out the .npmignore file.