[Fix] TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

# Table of Contents

1. React.js: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined
2. Node.js: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

If you got the error in a Node.js project, click on the second subheading.

# React.js: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

The "TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined" occurs when you have an outdated or glitched version of react-scripts.

To solve the error, upgrade your version of react-scripts and delete and reinstall your node modules if necessary.

The first thing you should try is to upgrade your version of the react-scripts package.

Copied!
# 👇️ with NPM
npm install react-scripts@latest

# --------------------

# 👇️ with YARN
yarn add react-scripts@latest

If you get an error when running the command, use the --force flag.

Copied!
npm install react-scripts@latest --force

The issue is sometimes caused by running the npm audit fix command.

# Manually update your react-scripts version

If the error persists, issue the npm info react-scripts version command.

Copied!
npm info react-scripts version

Open your package.json file and manually update the version of the react-scripts package.

For example, the output of the command shows 5.0.1 in my case, so I'd set the version of react-scripts in package.json to 5.0.1.

Copied!
{
  "dependencies": {
    "react-scripts": "5.0.1"
  }
}

After you update the version of the package, rerun the npm install command.

Copied!
# 👇️ with NPM
npm install

# --------------------

# 👇️ with yarn
yarn

# Delete your node_modules and reinstall your dependencies

If the error is not resolved, try to delete your node_modules and package-lock.json (not package.json) files, re-run npm install and restart your dev server.

Copied!
# 👇️  (macOS/Linux) delete node_modules and package-lock.json
rm -rf node_modules
rm -f package-lock.json

# 👇️  (Windows) delete node_modules and package-lock.json
rd /s /q "node_modules"
del package-lock.json

# 👇️ clean npm cache
npm cache clean --force

# 👇️ with NPM
npm install

# 👇️ or with YARN
yarn

# Update your webpackDevServer.config.js if you ejected your React App

If you ejected your app by running the npm run eject command, you have to update the config/webpackDevServer.config.js file in your project to resolve the error.

Open your config/webpackDevServer.config.js and update the following line:

Copied!
app.use(noopServiceWorkerMiddleware());

To the following line:

Copied!
app.use(noopServiceWorkerMiddleware('/'));

Try to restart your development server after making the change.

# Update the versions of all React packages

If the error persists, try to upgrade the versions of all react-related packages in your project.

Copied!
# 👇️ with NPM
npm install react-scripts@latest react@latest react-dom@latest

# --------------------

# 👇️ with YARN
yarn add react-scripts@latest react@latest react-dom@latest

The react-scripts package only supports specific versions of react and react-dom, so you might have a mismatch.

If you get an error, try running the command with the --force flag.

Copied!
npm install --force react-scripts@latest react@latest react-dom@latest

# Node.js: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

The Node.js "TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined" occurs when you pass an undefined value to a path method.

To solve the error, make sure to pass a string to the method.

Here is an example of how the error occurs.

Copied!
import path from 'path';

// ⛔️ TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
console.log(path.resolve(undefined));

We passed an undefined value to the path.resolve() method which caused the error.

You can console.log() the value you are passing to the method to verify it is undefined.

# Accessing an undefined property on an object

You are likely accessing an undefined property on an object.

When you access an object property that doesn't exist, an undefined value is returned.

Copied!
import path from 'path';

const obj = {};

console.log(obj.path); // undefined

// ⛔️ TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
console.log(path.resolve(obj.path));

The path property doesn't exist on the object, so trying to access it returns undefined.

# Use the logical OR (||) operator to provide a fallback

One way to solve the error is to use the logical OR (||) operator to provide a fallback value of an empty string if the value is undefined.

Copied!
import path from 'path';

const obj = {};

console.log(obj.path); // undefined

// 👇️ /home/borislav/Desktop/bobbyhadz-rest/bobbyhadz-js
console.log(path.resolve(obj.path || ''));

If the value to the left is equal to undefined an empty string is returned, so the error is no longer raised.

# Use the nullish coalescing (??) operator to solve the error

You can also use the nullish coalescing (??) operator to provide a fallback.

Copied!
import path from 'path';

const obj = {};

console.log(obj.path); // undefined

// 👇️ /home/borislav/Desktop/bobbyhadz-rest/bobbyhadz-js
console.log(path.resolve(obj.path ?? ''));

If the value to the left of the nullish coalescing operator (??) is equal to null or undefined, the value to the right is returned, otherwise, the value to the left of the operator is returned.

If the value to the left is undefined, an empty string is returned.

# Checking if the value is undefined before calling the method

You can use an if statement if you need to check if the value is undefined before passing it to a method.

Copied!
import path from 'path';

const obj = {};

if (obj.path) {
  const result = path.resolve(obj.path);
  console.log(result);
} else {
  // 👇️ this runs
  console.log('The value is undefined');
}

The code sample uses an if statement to check if the variable stores a truthy value before passing it to the path.resolve() method.

We only call the method if the variable doesn't store an undefined value, otherwise, the else block runs.

# Using the __dirname variable correctly

If you meant to use the __dirname variable to get the absolute path of the current directory, use the following code sample.

Copied!
import path from 'path';
import {fileURLToPath} from 'url';

const __filename = fileURLToPath(import.meta.url);
console.log('file name: ', __filename);

const __dirname = path.dirname(__filename);
console.log('directory name: ', __dirname);

// 👇️ /home/borislav/Desktop/bobbyhadz-rest/bobbyhadz-js/another
console.log(path.resolve(__dirname, 'another'));

The code sample uses the fileURLToPath and the path.dirname() methods to construct the absolute path to the directory.