How to Resolve the 'npm start' Failed with 'Port is already in use' Error in a React Application

Photo by S A on Unsplash

3 min read Tech article

Note: back up important files before running commands or scripts.

Resolving the 'npm start' Failed with 'Port is already in use' Error in a React Application

Problem Statement

When attempting to start a React application using `npm start`, you may encounter an error indicating that the port is already in use. This error prevents your application from running successfully.

Prerequisites

* Node.js (LTS or latest version) * npm (version 6 or later) * A React application created with `create-react-app` (version 2 or later) * A code editor or IDE * Familiarity with npm and Node.js

Root Cause

The 'Port is already in use' error occurs when the port specified in your `package.json` file is currently occupied by another process. This can happen when another application or service is running on the same port, or when you've previously run a React application on the same port without properly shutting it down.

Solution

To resolve the 'Port is already in use' error, follow these steps: ### Step 1: Identify the Port in Use First, identify the port that's currently in use. You can do this using the `netstat` command on Windows or `lsof` on macOS/Linux:

bash

netstat -an | findstr 3000

Replace `3000` with the port number specified in your `package.json` file. ### Step 2: Kill the Process Using the Port Once you've identified the port in use, kill the process using the port. On Windows:

powershell

Taskkill /F /PID 1234 /T

Replace `1234` with the process ID (PID) of the process using the port. On macOS/Linux:

bash

kill -9 1234

### Step 3: Update the Port in `package.json` Update the port number in your `package.json` file to a new, unused port:

json

{
  "name": "my-react-app",
  "version": "0.1.0",
  "scripts": {
    "start": "react-scripts start --port 4000"
  },
  ...
}

Replace `4000` with a new port number. ### Step 4: Run `npm start` Again Run `npm start` again to start your React application on the new port:

bash

npm start

Verification

To verify that your application is running successfully, open a web browser and navigate to `http://localhost:4000` (or the new port number you specified). You should see your React application running without any issues.

Common Errors

### Error 1: `lsof` Not Installed If you're using macOS/Linux and encounter an error running `lsof`, you may need to install it using your package manager:

bash

sudo apt-get install lsof

### Error 2: `netstat` Not Working If `netstat` is not working on Windows, you may need to enable the Windows Firewall or disable it temporarily:

powershell

netsh advfirewall set allprofiles state=off

### Error 3: Unable to Kill Process If you're unable to kill the process using the port, you may need to use a more aggressive method, such as:

bash

kill -9 -PID

Replace `-PID` with the PID of the process using the port.

Conclusion

Resolving the 'Port is already in use' error in a React application involves identifying the port in use, killing the process using the port, updating the port in `package.json`, and running `npm start` again. By following these steps, you should be able to get your React application running successfully on a new port.