[Solved] npm ERR! code ERR_INVALID_ARG_TYPE

Introduction

I was working on a old React app previously - after the git clone and npm install, I ran into the error:

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

Typically when you see this error means that the argument you have passed into your Node app is not correct.

But hang on, my app is not a backend Node app, but still see this error! In this case this can be a bug with the dependency you are using.

In this post, I will go over how to fix it with React apps and Node apps

1. ERR_INVALID_ARG_TYPE for React apps

As an example a more verbose error when we run npm install with React apps can look something like below:

npm timing reifyNode:node_modules/react-native Completed in 224225ms
npm timing reify:unpack Completed in 224435ms
npm timing command:i Completed in 247734ms
npm verb stack TypeError [ERR_INVALID_ARG_TYPE]: The "from" argument must be of type string. Received undefined
npm verb stack     at new NodeError (node:internal/errors:372:5)
npm verb stack     at validateString (node:internal/validators:120:11)
npm verb stack     at relative (node:path:1191:5)
npm verb stack     at /usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:1073:21
npm verb stack     at Array.map (<anonymous>)
npm verb stack     at /usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:1071:66
npm verb stack     at Array.map (<anonymous>)
npm verb stack     at Arborist.[rollbackMoveBackRetiredUnchanged] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:1071:8)
npm verb stack     at Arborist.[reifyPackages] (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:235:31)
npm verb stack     at async Arborist.reify (/usr/local/lib/node_modules/npm/node_modules/@npmcli/arborist/lib/arborist/reify.js:155:5)
npm verb cwd /builds/millionpugs/web-frontend
npm verb Linux 5.4.109+
npm verb node v16.15.0
npm verb npm  v8.10.0
npm ERR! code ERR_INVALID_ARG_TYPE
npm ERR! The "from" argument must be of type string. Received undefined

Steps to fix this error:

1. Clear cache, node_modules folder, package-lock.json files and reinstall
2. Upgrade to the latest react-scripts package
3. Make sure the path is correct in noopServiceWorkerMiddleware()

1a. Clear cache, node_modules folder, package-lock.json files and reinstall

One option that worked well for NPM issues for me is to nuke the whole project - removing node_modules and reinstall everything.

To do this we can use the steps, open up the terminal and make sure you are in the root directory of the project:

1. npm install -g npm@latest to update npm because it is sometimes buggy.
2. rm -rf node_modules to remove the existing modules.
3. Run npm cache clean --force to make sure we don’t have random modules from the cache.
4. Execute npm install to re-install the project dependencies.

When NPM installs modules, it keeps a cache of the downloaded files. This will be ~/.npm on Posix, or %AppData%/npm-cache on Windows.

So when the next time you try to install the same package and its dependencies, it will go to the cache folder and not waste time downloading it again.

NPM cache is usually advertised as “self healing”, however I have found that I need to run this a few times!

1b. Upgrade to the latest react-scripts package

This error commonly happens when you have done a create-react-app and the NPM package react-scripts.

Firstly, we need to check what version of react-scripts you are using. To do this, run the command:

npm info react-scripts version

Recommendation: Use the latest version of react-scripts

If you are using a old version of react-scripts, it is recommended that you upgrade to the latest version.

Open the terminal and run the following:

npm install react-scripts@latest

Or if you prefer using yarn, then in the terminal use the following command:

yarn add react-scripts@latest

Now if you are using react-scripts version less than 4, and for some reason want to keep the major version, eg “3.x.x”, the do the following:

1. Open up your package.json and locate the “react-scripts” attribute (under dependencies).
2. Change “react-scripts”: “^3.x.x” to “react-scripts”: “^3.4.1” (or the latest available version)
3. Delete your node_modules folder
4. Run npm install or yarn install

If the above steps still not working for you, then keep going to the next section.

1c. Make sure the path is correct in noopServiceWorkerMiddleware()

Now if you are using the latest version of react-scripts, the proper way to fix this issue is to first eject your React app (if you have not already done so).

We can eject a React app with the command:

npm run eject

(Note: This is assuming you have created your React app with create-react-app)

Next, find this file config/webpackDevServer.config.js and then inside this file find the following line:

app.use(noopServiceWorkerMiddleware());

Now we should change it to have the parameter of ('/') like so:

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

my-react-app/
  config/ 
    jest/
      cssTransform.js
      fileTransform.js
      jest-preprocess.js
      transform.js
    env.js
    paths.js
    webpack.config.js
    webpackDevServer.config.js 👈
  public/
    index.html
    favicon.ico
    manifest.json
  scripts/
    build.js
    start.js
    test.js
  src/
    App.js
    index.js
    serviceWorker.js
  .env
  .eslintignore
  .eslintrc.js
  .gitignore
  package.json
  README.md

Generally the file looks something like the below:

const noopServiceWorkerMiddleware = require("noop-service-worker-middleware");
 
module.exports = {
  // ...
  devServer: {
    before(app, server) {
      app.use(noopServiceWorkerMiddleware());
    }
    // ...
  }
  // ...
};

What is Ejecting in React?

In a React application, “eject” is a command that is used to reveal and edit the underlying configuration files of the application. When you eject a React application, you are essentially exposing the build tools and configuration that were hidden behind the create-react-app abstraction layer.

The create-react-app is a tool that generates a pre-configured React application with many helpful features and tools pre-configured, but it hides away some of the configuration and build tools from the developer. When you run npm run eject, it removes the create-react-app abstraction and exposes the underlying configuration files and build scripts for the developer to modify.

2. Fixing ERR_INVALID_ARG_TYPE for Node apps

Now if you are facing this ERR_INVALID_ARG_TYPE error with your Node app, this would mean that the parameter you are passing to one of the functions is null or not the correct expected type.

As an example, lets say we have the following Node JS code:

fs.readFile('index.html', function(err, data) {
    if (err) {
    	console.log(err);
    	res.writeHead(500, {'Content-Type': 'text/plain'});
    	res.write(err.toString());
    	res.end();
    } else {
    	res.writeHead(200, {'Content-Type': 'text/html'});
    	res.write(data);
    	res.end();
    }
});

The code tries to read a “index.html” file and returns it to the client.

Now when we run this code we are greeted with error ERR_INVALID_ARG_TYPE

_http_outgoing.js:595
   throw new ERR_INVALID_ARG_TYPE('first argument',
   ^

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be one of type string or Buffer. Received
type undefined
   at write_ (_http_outgoing.js:595:11)
   at ServerResponse.write (_http_outgoing.js:567:10)
   at ReadFileContext.callback (/home/marietto/code/app_v2.js:10:13)
   at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:237:13)

The error just means that we are passing a undefined value and it is expecting a string or Buffer type.

If we look at our original code, we can see that we have the line:

res.write(data);

So this could mean that “data” is undefined. Some ways we can troubleshoot this include:

• Verify that the file we are reading (in this case “index.html”) exists and is not corrupt
• Check that the path to the “index.html” file is correct.
• Make sure that the file is of correct content type - in this case HTML

Summary

In this post, I went over the error of npm ERR! code ERR_INVALID_ARG_TYPE. This error means that we are passing a invalid argument to a Node JS function.

So there are two areas that this error can occur - with front-end NPM - such as React apps or with Node apps.

To fix this for React apps, we can try to upgrade to the latest version of NPM and react-scripts package, clear cache, remove node_modules folder, remove package-lock.json and reinstall.

Additionally, if you have already ejected your React app, you can check to update the noopServiceWorkerMiddleware.

If you are seeing this in your Node apps, then we need to track down the function that is causing the error to come up. This usually happens with the fs library where we have passed in the wrong file path, or that the file is corrupt or not correct content.