javascript-how to solve EJSONPARSE error when using 'npm install xxx'?

1. Purpose

In this post, I would demo how to solve the below exception or error when we initialize a project using npm install command.

➜  learn-vue npm install vue
npm ERR! code EJSONPARSE
npm ERR! file /Users/bswen/js-projects/learn-vue/package.json
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected end of JSON input while parsing near ''
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/bswen/.npm/_logs/2021-03-23T10_27_08_820Z-debug.log
➜  learn-vue

We are installing the ‘vue’ module to our javascript project, the working directory is as follows:

/Users/bswen/js-projects/learn-vue

.
└── /Users/bswen/js-projects/learn-vue/
    ├── readme.txt
    └── calc.js

why?

2. The reason and solution

Before solve this problem, we should know the concept of npm:

npm is the package manager for the Node JavaScript platform. It puts modules in place so that node can find them, and manages dependency conflicts intelligently. It is extremely configurable to support a wide variety of use cases. Most commonly, it is used to publish, discover, install, and develop node programs.

2.1 Reason

The npm module needs a package.json to store metadata of dependencies, but there is no package.json in our project yet.

If you plan to publish your package, the most important things in your package.json are the name and version fields as they will be required. The name and version together form an identifier that is assumed to be completely unique. Changes to the package should come along with changes to the version. If you don’t plan to publish your package, the name and version fields are optional..

2.2 How to create package.json

We must create the package.json before we use ‘npm install xxx’ to add dependency to our project.

Just use ‘npm init’ as follows:

➜  learn-vue npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (learn-vue) learn-vue
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/bswen/js-projects/learn-vue/package.json:

{
  "name": "learn-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes

About npm init:

npm init <initializer> can be used to set up a new or existing npm package.

initializer in this case is an npm package named create-<initializer>, which will be installed by npx, and then have its main bin executed -- presumably creating or updating package.json and running any other initialization-related operations.

The init command is transformed to a corresponding npx operation as follows:

npm init foo -> npx create-foo
npm init @usr/foo -> npx @usr/create-foo
npm init @usr -> npx @usr/create
Any additional options will be passed directly to the command, so npm init foo -- --hello will map to npx create-foo --hello.

Now the project structure is:

/Users/bswen/js-projects/learn-vue
  readme.txt
  calc.js
  package.json

What’s inside the package.json? Here it is:

➜  learn-vue cat package.json
{
  "name": "learn-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
  }
}

2.3 Now try again

Now we can try again to install the module we need as follows:

➜  learn-vue npm install vue
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
added 1 package from 1 contributor in 0.946s
➜  learn-vue

Now let’s look at the package.json:

➜  learn-vue cat package.json
{
  "name": "learn-vue",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^2.6.12"
  }
}

3. Summary

In this post, we demonstrated how to solve the EJSONPARSE error when using ‘npm install xxxx’ command to add javascript dependencies to our project. Actually you should make sure that you always have a ready ‘package.json’ in your project. There is a trick in it. Thanks for your reading. Regards.