Solving the 'npm WARN saveError ENOENT: no such file or directory, open '/Users/<username>/package.json'' error

Question

I'm a newbie so please include links to URLs or explain terminologies so I can understand.

I've managed to install 'npm' on a Mac OS (10.13.3) via the terminal, and have installed some packages like SASS using it.

I'm now trying to install sass-mq using npm. I think I've managed to install it, but I'd like a second opinion on what I might have done that was incomplete, or wrong while doing it.

Initially, following the instructions on the sass-mq Github page, I was trying to use:

npm install sass-mq --save 

which gave me this error:

npm WARN saveError ENOENT: no such file or directory, open '/Users/<username>/package.json'     npm WARN enoent ENOENT: no such file or directory, open '/Users/<username>/package.json'     npm WARN <username> No description     npm WARN <username> No repository field.     npm WARN <username> No README data     npm WARN <username> No license field.      + [email protected]     updated 1 package and audited 1 package in 1.67s     found 0 vulnerabilities 

Looking around, I realised I'm meant to be using

npm init 

..before typing my 'install sass-mq --save' command.

Cool, done that. Next error was this:

package name: (nikhil) sass-mq version: (1.0.0)  description:  entry point: (index.js)  test command:  git repository:  keywords:  author:  license: (ISC)  About to write to /Users/nikhil/package.json:  {   "name": "sass-mq",   "version": "1.0.0",   "description": "",   "main": "index.js",   "dependencies": {     "sass-mq": "^5.0.0"   },   "devDependencies": {},   "scripts": {     "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "",   "license": "ISC" }   Is this OK? (yes)  darwin:~ nikhil$ npm install sass-mq --save npm ERR! code ENOSELF npm ERR! Refusing to install package with name "sass-mq" under a package **npm ERR! also called "sass-mq". Did you name your project the same npm ERR! as the dependency you're installing?** 

I think this is saying that I can't use 'sass-mq' (which is the name of the package, as the name of the local package (?) I'm installing into on my local machine. Some more info here.

So I simply tried this:

**package name: (sass-mq) media-queries-nikhil** version: (1.0.0)  description:  git repository:  keywords:  author:  license: (ISC)  About to write to /Users/nikhil/package.json: 

and it seems to have worked OK.

My question is: Is this the right way I should have done this? How do you usually do this?

Also, I get these warnings - is it OK to ignore them?

npm WARN [email protected] No description npm WARN [email protected] No repository field. 

I'm creating this question in part so others like me looking for the answer to a similar issue can find an explanation, instead of just commands they need to fix their issue. I found a few similar question-threads, but none that actually explained what was happening and why.

Thanks for reading, I really appreciate any help with this :)

Answer 1

TL;DR: The way you have done it is fine, and you needn't worry about those warnings.

For a more in-depth idea of why npm exists and how it works, read on.

npm stands for Node Package Manager. Packages are a fundamental part of the node ecosystem - they exist to allow you to use other people's solutions to common problems.

However, this can get very confusing, since, because this is an open source community, they are all being released at different times by different people. Also, two different packages that you use may actually be dependent on a third package that is completely unknown to you, and potentially they may even need different versions of that package.

As you can already see, this has the potential to get very messy.

npm helps you deal with these 'dependencies' in a way that is easier to manage and think about, however it is not essential to use npm - you can write a node app where you organise all these different files yourself. That's going to get very confusing, very quickly, however, so there's no real advantage in at least 99% of cases. There are also other package managers - personally I use yarn but they're all trying to do similar things, so that choice is mainly a matter of preference and outside the scope of this discussion.

So when you start a new project, you type npm init and this tells npm to make a file in your folder called package.json that is going to help you organise these dependencies. package.json will hold the information about your own app (which is a package in its own right) and also which packages you have told npm you are going to be using as dependencies in your own project. This is why it asks you all those questions about your package name and description, so that if you ever publish it, people will know who to contact, what it does, what version it is, etc.

It is only important to give this serious thought if you actually intend to publish your package, which is less likely in the case of a website, but very likely if you're making a library. However, as you've already discovered, packages are meant to have unique names, which is why you should call your package something personal to you, so you don't end up with a naming conflict like you did when you tried to name your package the same as a package you were later going to try to install.

So let's create our own package, and install our first dependency (which, remember, is just another package). I'm going to choose time-stamp as a dependency because it's nice and small.

First you will make your project directory. This is just an empty new directory. Let's call it ts. From inside the ts directory, type npm init into your terminal and answer its questions (although I usually just press return to them all,) then look inside the directory and you will see the package.json file. Open the file, and you will see all your package information. And currently that's it.

So now back to the command line and type npm install time-stamp. When it's finished thinking, open package.json again and you will see time-stamp referenced in the list of 'dependencies.' (As of npm 5 it is no longer necessary to use the --save option. npm now assumes this as default. What is the --save option for npm install?)

Back inside the directory, you will also see another file called package-lock.json and a directory called node_modules.

The node_modules directory will contain a directory called time-stamp and that holds all the code that makes time-stamp work. You probably don't need to look in here very often, but you can, and if you look inside the time-stamp directory you will see it has got its own package.json! Open it up and have a look, and there's all the information it needs to install itself. You'll note that it doesn't have any dependencies, but if it did, they would be installed in your node_modules with all of their dependencies as well... and their dependencies... and theirs... If you want to see this in action, try installing the testing framework 'jest. Again, just npm install jest.

Hopefully the whole thing's beginning to make a bit of sense, now...

The lock file is slightly more complicated. What it does is make sure that when you deploy your project onto a new system that you use exactly the same set of dependencies. It needs to do this because the way npm organises things can be dependent on latest release versions, etc, and it would be very annoying if you were to try to deploy your app and it didn't work because your dependencies were behaving in a different way from your development environment!

Having said all this, basically you can ignore it at this stage! It's an important part of npm, but you shouldn't edit it directly unless you really know what you're doing.

Once you have installed your dependency, you will be able to require or import it anywhere in your project, without having to worry about directing it to the correct path in your directory structure. Just require('time-stamp') and it will work just fine!

Finally, and well done for getting this far, it's worth mentioning global installation. Using the -g option - that is npm install time-stamp -g - means that the dependency will be installed in a central node_modules directory somewhere on your computer rather than in your project's node_modules folder. However, you will still need to link it to your project (so that it ends up as a dependency in your package.json) and you would do that by typing npm link time-stamp. Personally I like all my modules to be local to my project, but again this depends on your use-cases and to an extent personal preference.

What this all means is that the combination of your package.json and the lock file is a perfect representation of all the files in your node_modules, and this means that you don't need to have them in your git (or other repository.) You can pull your repository down to a new server, and all you have to do is type npm install and they'll be dragged down from the internet there and then. This becomes much more important when you have a large project, because of all the files involved in your dependencies, but it's a good habit to add 'node_modules' to your .gitignore from day one. But I'm starting to get off topic so maybe I should end here...

This is only intended to be a basic introduction, so I have kept it fairly simple, and I don't want to create an in-depth tutorial, but if you need clarification on any of the points I've made, feel free to comment and I'll make edits if I can!