How to fix “npm err! missing script: start”

After creating a react app using your favorite method and the next method is mostly done by a developer is npm start which spins up a server in your localhost on port 3000 by default unless or until explicitly mentioned. But sometimes this command leads to an npm err! This is what the blog tries to cover and help fix the error.

Introduction?

There are different errors faced while using npm like broken npm installation, no git, no space, etc. In that way, today we are dealing with the npm error encountered when the start command is not triggered.

Reasons for the error?

There can be more than one possible situation that causes this error. These are as listed:

Not in the correct project directory
Your `package.json` file doesn’t contain the start script

Incorrect Project Directory

As soon as you create a new react application it creates a new folder in the present directory and all the files of the react application reside there. You are required to jump into the directory as per the name of your project while creating and then run the npm commands.

Missing npm script in package.json

When a react app is initialized it automatically generates a package.json file. It contains a script key that has several other contents like build, test, and eject. Make sure that it contains the start key with the appropriate command to shoot up the react local server.

Overcome the npm encountered error⚒️

There are 2 ways through which we can avoid this error.

Run the command in an appropriate directory
Start command present in package.json

Note: These steps assume that you already have a react project initialized.

Run the npm start command in the appropriate directory

After initializing the react app make sure to checkout to the project directory using the command:

cd <project-name>
Code language: Bash (bash)

After shifting to the project directory run the required command:

npm start
Code language: Bash (bash)

This would partly resolve the error, considering that there is a start script present in the package.json file. Even if this doesn’t solve the issue then continue reading to get the solution.

Ensuring the presence of the start script in package.json

The package.json is the heart of any node project. It contains necessary data about the project which is required before publishing to npm, and also defines functional attributes of a project that npm uses to install dependencies, run scripts, and identify the entry point to our package. Hence make sure that there are no issues in package.json.

This is an example package.json which resolves the issue.

{
  "name": "<project-name>",
  "version": "1.0.0",
  "scripts": {
    "start": "react-scripts start"
  }
}Code language: JSON / JSON with Comments (json)

But a more robust script would contain almost all required commands ranging from start to eject. Here is an example:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
Code language: JSON / JSON with Comments (json)

This is the more predominant snippet found even in many production-ready codebases not to the fullest at least they contain all the required ones.

Also, you need to make sure that there are only a single “scripts” present in the pakage.json file. If there are multiple scripts then the latter one is taken into consideration ignoring the previous instances. Here is a quick walkthrough of the same:

{
  "name": "<project-name>",
  "version": "1.0.0",
  <strong>"scripts"</strong>: {
    "start": "react-scripts start"
  }
  <strong>"scripts"</strong>: {
    "dev" : "node dev.js"
  }
}
Code language: JSON / JSON with Comments (json)

The above snippet shows multiple “scripts” present in package.json. If you execute the command:

npm run
Code language: Bash (bash)

then you could observe that only the latter one is considered. Then if we execute the nom start command without this knowledge then again we would face the same npm err! So to avoid the problem we need to combine the text under both scripts and combine them into a single script. Here is an example:

{
  "name": "<project-name>",
  "version": "1.0.0",
  <strong>"</strong>scripts<strong>"</strong>: {
    "start": "react-scripts start"
    "dev" : "node dev.js"
  }
}
Code language: JSON / JSON with Comments (json)

Conclusion?

This blog addresses one of the initial issues encountered i.e. npm ERR! and serves as a blocker to newbies of React which hinders their learning curve. It covers all the potential reasons for facing the issue with various solutions to overcome the error.

A more comprehensive course is being offered by codedamn named Learn NPM – Node Package Manager complete course. It teaches about npm you from scratch and gives a clear walkthrough of all the package.json file as well which is more prominent in this blog.