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.
You clone a repo, or maybe you are creating your project with a new package.json file. When you try to npm install, npm install package_name — save-dev, ornpm i npm`, the JSON doesn’t parse.
npm ERR! code EJSONPARSE
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token…
This error could occur because of any number of reasons. You think something is probably wrong with your package.json file, but you’re not exactly sure what it is. Maybe you try yarn install because Yarn is a package manager similar to npm that’s known to be faster and have more enhancements. But that probably doesn’t help if the issue is with your JSON. Here are some possible solutions or ways to diagnose the issue:
1.) npm cache clean -force: Cleaning your cache will resolve potential conflicts with previously installed packages.
2.) Debug log: This might point you to the exact location where the error is occurring so you can fix it. You can find the location of the debug log in the console output. For example,
3.) JSON validator: Use a tool like JSONLint to check and make sure your package.json file is valid. A JSON validator or a linter should give you more insight as to why your file is not parsing.
4.) Check commas: In some cases, adding a comma between key value pairs may help. In my case, deleting a trailing comma resolved the error.
5.) Minify: A minifier could remove extra white space or improper formatting and resolve the issue.
6.) Number of packages: Make sure you just have one package in your package.json. It’s better to split your project into multiple directories if you want to use multiple packages. Every component requires its own package.jsonto avoid versioning issues or to make require-statement resolution works.
7.) rm package-lock.json: Removing the lock file and running npm install again could help resolve versioning issues.
Hopefully one of these solutions helped you. Please add your ideas or any other solutions you may have in the comments!
Thank you Angie Jones for teaching me the listicle blogging style, Jess Lee for reviewing this blog post and providing awesome feedback, Write Speak Code for inspiring me to write it, and Recurse Center for being a wonderful programming community!
You clone a repo, or maybe you are creating your project with a new `package.json` file. When you try to `npm install`, `npm install package_name — save-dev, or `npm i npm`, the JSON doesn’t parse.
repeated EJSONPARSE error https://t.co/qD3zc8FtWz
— @ReactAtSO
npm ERR! code EJSONPARSE
npm ERR! JSON.parse Failed to parse json
npm ERR! JSON.parse Unexpected token…
This error could occur because of any number of reasons. You think something is probably wrong with your `package.json` file, but you’re not exactly sure what it is. Maybe you try `yarn install` because Yarn is a package manager similar to npm that’s known to be faster and have more enhancements. But that probably doesn’t help if the issue is with your JSON. Here are some possible solutions or ways to diagnose the issue:
1.) npm cache clean -force: Cleaning your cache will resolve potential conflicts with previously installed packages.
2.) Debug log: This might point you to the exact location where the error is occurring so you can fix it. You can find the location of the debug log in the console output. For example,
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/bd/.npm/_logs/2018–07–31T20_09_06_054Z-debug.log
3.) JSON validator: Use a tool like JSONLint to check and make sure your package.json file is valid. A JSON validator or a linter should give you more insight as to why your file is not parsing.
4.) Check commas: In some cases, adding a comma between key value pairs may help. In my case, deleting a trailing comma resolved the error.
“scripts”: {
- “start”: “webpack-dev-server”,
+ “start”: “webpack-dev-server”
},
5.) Minify: A minifier could remove extra white space or improper formatting and resolve the issue.
6.) Number of packages: Make sure you just have one package in your package.json. It’s better to split your project into multiple directories if you want to use multiple packages. Every component requires its own package.jsonto avoid versioning issues or to make require-statement resolution works.
7.) rm package-lock.json: Removing the lock file and running npm install again could help resolve versioning issues.
Hopefully one of these solutions helped you. Please add your ideas or any other solutions you may have in the comments!
Thank you Angie Jones for teaching me the listicle blogging style, Jess Lee for reviewing this blog post and providing awesome feedback, Write Speak Code for inspiring me to write it, and Recurse Center for being a wonderful programming community!