TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app

Javascript Reactjs Redux Visual Studio-Code Yarnpkg

Javascript Problem Overview

I'm working on a project in React and ran into a problem that has me stumped.

Whenever I run yarn start I get this error:

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

I have no idea why this is happening, if anyone has experienced this I would be grateful.

Javascript Solutions

Solution 1 - Javascript

To fix this issue simply upgrade react-scripts package (check latest version with npm info react-scripts version):

Replace in your package.json "react-scripts": "^3.x.x" with "react-scripts": "^3.4.1" (or the latest available version)
(optional for some) Delete your node_modules folder
Run npm install or yarn install

Some people reported that this issue was caused by running npm audit fix (avoid it!).

Solution 2 - Javascript

If you have ejected, this is the proper way to fix this issue:

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

app.use(noopServiceWorkerMiddleware());

You should change it to:

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

For me(and probably most of you) the service worker is served at the root of the project. In case it's different for you, you can pass your base path instead.

Solution 3 - Javascript

I've also faced this problem and figure out it by upgrading the react-scripts package from "react-scripts": "3.x.x" to "react-scripts": "^3.4.1" (or the latest available version).

Delete node_modules\ folder
Delete package-lock.json file
Rewrite the package.json file from "react-scripts": "3.x.x" to "react-scripts": "^3.4.1"
Install node packages again npm i
Now, start the project npm start

And it works!!

Solution 4 - Javascript

Running npm i [email protected] solved my issue.

Solution 5 - Javascript

I just had this issue after installing and removing some npm packages and spent almost 5 hours to figure out what was going on.

What I did is basically copied my src/components in a different directory, then removed all the node modules and package-lock.json (if you are running your app in the Docker container, remove images and rebuild it just to be safe); then reset it to my last commit and then put back my src/components then ran npm i.

I hope it helps.

Solution 6 - Javascript

We ejected from react-scripts and so could not simply upgrade the package.json entry to fix this.

Instead, we did this:

in a new directory, create a new project -> $> npx create-react-app foo-project
and then eject it -> cd ./foo-project && npm run eject
now copy the files from /foo-project/config into the config directory of our main app and fire up your dev server

hope this helps others in a similar bind.

Solution 7 - Javascript

Simply update react-scripts to the latest version.

yarn add react-scripts@latest

OR IF USING NPM

npm install react-scripts@latest

Solution 8 - Javascript

I had this same issue and running npm install react-scripts@latest fixed my issue.

Solution 9 - Javascript

Go to you package.json
Change "react-scripts": "3.x.x" to "react-scripts": "^3.4.0" in the dependencies
Reinstall react-scripts: npm I react-scripts
Start your project: npm start

Solution 10 - Javascript

If you ejected and are curious, this change on the CRA repo is what is causing the error.

To fix it, you need to apply their changes; namely, the last set of files:

packages/react-scripts/config/paths.js
packages/react-scripts/config/webpack.config.js
packages/react-scripts/config/webpackDevServer.config.js
packages/react-scripts/package.json
packages/react-scripts/scripts/build.js
packages/react-scripts/scripts/start.js

Personally, I think you should manually apply the changes because, unless you have been keeping up-to-date with all the changes, you could introduce another bug to your webpack bundle (because of a dependency mismatch or something).

OR, you could do what Geo Angelopoulos suggested. It might take a while but at least your project would be in sync with the CRA repo (and get all their latest enhancements!).

Solution 11 - Javascript

If you have an ejected create-react-app, I would suggest:

Create a new React app through create-react-app.
Eject it through npm run eject or yarn eject.
Install all the packages that are missing from the package.json.
Copy your src folder assuming all your code is situated in this folder.
Redo your changes on the config and script folders, if needed.

Worked for me.

Solution 12 - Javascript

I tried various approach described above but none of them worked since I have ejected my css. Finally applying following steps helped:

Upgradereact-scripts from "react-scripts": "3.x.x" to "react-scripts": "^3.4.0"
Downgrading react-dev-utils form "react-dev-utils": "^10.x.x" to "react-dev-utils": "10.0.0"
Delete node-modules folder and package-lock.json/yarn.lock
Reinstall packages npm install/yarn install

Solution 13 - Javascript

In my case, it was because I (at one point) had reactn installed, which also includes its own version of React (for some reason).

After that had been installed (even after uninstalling again), this error occured.

I simply removed node_modules and ran npm install again, and it worked.

Solution 14 - Javascript

I didn't want to upgrade react-scripts, so I used the 3rd party reinstall npm module to reinstall it, and it worked.

npm i -g npm-reinstall
reinstall react-scripts

Solution 15 - Javascript

Simply upgrading react-scripts version solved my issue. react-scripts package from "react-scripts": "3.x.x" to "react-scripts": "^3.4.1" (or the latest available version). Avoid deleting package-lock.json straightaway. First try this, if it doesn't work then proceed further.

Solution 16 - Javascript

Follow the below steps. I also encountered the same problem.

remove the whole node_modules folder.
remove the package-lock.json file.
run command npm install npm-install as shown in the image:

showing the command to install npm

Here we go.. npm start...wao

Solution 17 - Javascript

Just need to remove and re-install react-scripts

To Remove yarn remove react-scripts To Add yarn add react-scripts

and then rm -rf node_modules/ yarn.lock && yarn

Remember don't update the react-scripts version maually

Solution 18 - Javascript

I had the same issue running it in my pipeline.

For me, the issue was that I was using node version v10.0.0 in my docker container.

Updating it to v14.7.0 solved it for me

Solution 19 - Javascript

None of the other solutions worked for me.

However, adding this to my package.json fixed the issue for me:

"resolutions": {
  "react-dev-utils": "10.0.0"
},

Solution 20 - Javascript

Setting the HOME environment variable to an appropriate value fix this issue for me.

Solution 21 - Javascript

I fixed this issue by setting a newer version of node as default in nvm i.e.:

nvm alias default 12.XX.X

Solution 22 - Javascript

I was having the exact same issue for a gatsby blog. The dependencies couldn't be upgraded and could only run on npm version 10.22.1.

What works for me is the following:

#!/bin/bash
rm -rf .cache
rm -rf public
gatsby build
gatsby serve

Basically the completely rebuild everything, and this error is gone. Very annoying but at least it builds.

What's ever more weird is that, if I tweaked the image of the blog post, e.g., resizing it a bit, it builds. I have absolutely no idea why. But that least that's a clue.

Solution 23 - Javascript

If you have an ejected CRA, there are a few changes to the webpack-dev-server config that if left unchanged will throw this error. Comparing a freshly ejected CRA 4.x config to my CRA 3.x config showed a number of changes to functions that didn't previously accept arguments that now do.

In my case, one of the breaking changes was the addition of a path to their noopServiceWorkerMiddleware function. Adding in the missing path noopServiceWorkerMiddleware(paths.publicUrl) fixed this for me.

Solution 24 - Javascript

If you are finding it difficult to show up an image in you react.js file, I tried searching on youtube. It suggests adding image inside 'public' folder(rather than 'src' folder).

Although still looking for reasons why adding images inside 'src' folder didnt worked out.

link:

https://www.youtube.com/watch?v=taMJct5oeoI&ab_channel=EsterlingAccime

https://daveceddia.com/react-image-tag/

Solution 25 - Javascript

Switching from powershell to bash fixed this problem for me.

Solution 26 - Javascript

this has nothing to do with react, as the error specified, undefined is not accepted as the path argument. make sure you don't pass a variable to path.join that happens to be undefined or null. for example:

const {path} = require('path'); 
let arg = undefined;
let mypath = path.join(__dirname, arg);

// The same error would occur.

Content Type	Original Author	Original Content on Stackoverflow
Question	Fredrick Barrett	View Question on Stackoverflow
Solution 1 - Javascript	EngrEric	View Answer on Stackoverflow
Solution 2 - Javascript	Iman Mohamadi	View Answer on Stackoverflow
Solution 3 - Javascript	Fatema Tuz Zuhora	View Answer on Stackoverflow
Solution 4 - Javascript	albert sh	View Answer on Stackoverflow
Solution 5 - Javascript	Solijon Sharipov	View Answer on Stackoverflow
Solution 6 - Javascript	Al DeLuca	View Answer on Stackoverflow
Solution 7 - Javascript	paulobunga	View Answer on Stackoverflow
Solution 8 - Javascript	Unknown Unknowns	View Answer on Stackoverflow
Solution 9 - Javascript	edebo	View Answer on Stackoverflow
Solution 10 - Javascript	jpz95	View Answer on Stackoverflow
Solution 11 - Javascript	Geo Angelopoulos	View Answer on Stackoverflow
Solution 12 - Javascript	Binod Kafle	View Answer on Stackoverflow
Solution 13 - Javascript	Mathias Lykkegaard Lorenzen	View Answer on Stackoverflow
Solution 14 - Javascript	Grinn	View Answer on Stackoverflow
Solution 15 - Javascript	Abhishek Bhaskar	View Answer on Stackoverflow
Solution 16 - Javascript	Rahul Daksh	View Answer on Stackoverflow
Solution 17 - Javascript	champion-runner	View Answer on Stackoverflow
Solution 18 - Javascript	Lorenz Weiß	View Answer on Stackoverflow
Solution 19 - Javascript	chaitan94	View Answer on Stackoverflow
Solution 20 - Javascript	Fredster	View Answer on Stackoverflow
Solution 21 - Javascript	Pedro Emilio Borrego Rached	View Answer on Stackoverflow
Solution 22 - Javascript	kohane15	View Answer on Stackoverflow
Solution 23 - Javascript	David Barker	View Answer on Stackoverflow
Solution 24 - Javascript	Ankur Goyal	View Answer on Stackoverflow
Solution 25 - Javascript	Dr. Hilarius	View Answer on Stackoverflow
Solution 26 - Javascript	Bing	View Answer on Stackoverflow