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

Question

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 you are arriving here after June 2020, you should check this answer instead of the accepted answer. https://stackoverflow.com/a/62287792/147562 — boatcoder, Jun 18 '20 at 18:59
In my case I was using `const path = require( "path" )` and then using `path` to join a subdirectory like `path.join( myDirectoryName )`. However, `myDirectoryName` was sometimes `null` and that's what was causing this error to occur. — Joshua Pinter, Mar 16 '21 at 18:48
This happened for me after upgrading RedwoodJS via `yarn rw upgrade`. Reverting that commit and running `yarn install` again (to downgrade) fixed the problem for me. I'll figure out the Redwood upgrade later. — Ryan, Apr 30 '21 at 18:06
Still facing this issue on `react-scripts: 4.0.3` I had to downgrade to `react-scripts: 3.4.0` It's really disturbing. — ArchNoob, May 22 '21 at 13:02

score 454 · Accepted Answer · edited Jun 20 '20 at 00:45

454

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!).

edited Jun 20 '20 at 00:45

CPHPython

12,379
5
59
71

answered Feb 15 '20 at 19:23

EngrEric

4,792
1
8
6

17

My issue was resolved when indeed upgrading from `3.3.0` to `3.4.0`. The weird thing is that is just stopped working in the middle of development, without any reason. – Dragan Okanovic Feb 16 '20 at 12:40
4

Do you know why this is happening? – Ilyas karim Mar 06 '20 at 17:21
I was also working when suddenly it started to happen.. why was this happening? – fnaquira Mar 18 '20 at 16:37
thanks. I did the same and it didn't work. My issue was npm cache, so had to delete node_modules, as proposed here. Just leaving the comment, as a record. – Mario Mar 19 '20 at 10:45
1

See the linked comment from this GitHub issue thread: https://github.com/facebook/create-react-app/issues/8499#issuecomment-589561657 Breaking change here: https://github.com/facebook/create-react-app/commit/1cbc6f7db62f78747cb6ca41450099181139325e#diff-595228c9c4e2f6619c6bb1478ba4ef87R14 – Sean Mar 21 '20 at 18:45
35

This 'just started' happening to me too, but it was really after running `npm audit fix`, in case that's useful to anyone. – Jeremy Jones Mar 23 '20 at 11:36
1

I just changed the changed the react-script version to ^3.4.0 and ran yarn install and it resolved the problem. Didn't need to delete node_modules folder – smartexpert Apr 12 '20 at 16:23
Sadly it doesn't fix it for me! :( – Jamie Hutber Apr 15 '20 at 12:30
Wow this actually fixed it. for awhile it would work with just SKIP_PREFLIGHT_CHECK=true but tonight it gave me the path argument of type string error and this solution fixed it. – CDM social medias in bio Apr 19 '20 at 04:36
1

I didn't have to remove `node_modules`, simply running `npm update` after changing the package version worked for me. – Gustavo Straube Apr 22 '20 at 15:51
4

this started occuring after running "npm audit fix" – Dworo Apr 25 '20 at 09:04
1

Here is a tip: never run "npm audit fix". It will likely ruin your project and make you want to punch a wall. – Dror Bar Apr 26 '20 at 17:10
I kept on seeing a warning that I should run yarn upgrade. After doing so, I ran into this issue, and the answer fixed it. Thanks! – Wouter van Nifterick Apr 30 '20 at 20:52
After running "npm audit fix" I faced the "TypeError" issue. Above solution worked for me. – Shr4N May 11 '20 at 03:43
2

Double-check that your version of react-scripts is set to ^3.4.1 in package.json. This was my problem. No amount of re-installing will work if this isn't set correctly. – Raydot Aug 02 '20 at 21:35
In my Package didnt have ther version of react-scripts so, I had to run this command yarn add react-scripts@latest – Cristian Guaman Aug 14 '20 at 13:27
How could you fix it if you don't want to upgrade react? – Grinn Feb 08 '21 at 20:09
In my case the main issue was 'react-scripts' is locked in to a specific version. Prefix it with `^` and run `npm update` – vandijkstef Apr 16 '21 at 07:58
I have this problem with v4.0.3 – ekkis Jul 04 '21 at 21:17
for me "rm yarn.lock" and "yarn install" fixed it. My go-to fix for yarn problems nowadays...:( – A. Rabus Feb 08 '22 at 11:28

score 73 · Answer 2 · answered Jun 09 '20 at 16:50

73

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.

answered Jun 09 '20 at 16:50

Iman Mohamadi

6,552
3
34
33

2

I think `app.use(noopServiceWorkerMiddleware(''));` can also work based on what I see and tested here https://github.com/facebook/create-react-app/issues/8499#issuecomment-589561657 – Nafis Jun 17 '20 at 04:41
2

yea that also might work. I was successful with '/' so didn't tried other things. – Iman Mohamadi Jun 17 '20 at 06:36
This fixed it for me too. Thank you! – 14mble Aug 20 '20 at 12:50
I'm on `react-scripts@^4.0.3` and this was the answer for me. – Roger Perez Sep 29 '21 at 19:11
I have ejected my react-scripts project, and this fixed it for me too. Thank you! – Michael An Aug 30 '23 at 03:51

Fatema Tuz Zuhora · Answer 3 · 2020-07-03T07:29:09.230

48

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!!

edited Jul 03 '20 at 07:29

answered Feb 16 '20 at 17:53

Fatema Tuz Zuhora

3,088
1
21
33

1

latest version is `3.4.1` since 21 March 2020 – Giorgi Gvimradze May 05 '20 at 19:56
do not delete package-lock! unless you want all you package versions to be messed up upon the next `npm i`, then by all means, delete package-lock – Jim Sep 09 '21 at 17:55

score 20 · Answer 4 · edited Apr 22 '20 at 19:43

20

Running npm i react-dev-utils@10.0.0 solved my issue.

edited Apr 22 '20 at 19:43

M--

25,431
8
61
93

answered Apr 22 '20 at 19:34

albert sh

1,095
2
14
31

5

I did all the previous, and then this fix it. – NicoWheat May 04 '20 at 02:34

score 11 · Answer 5 · answered Feb 15 '20 at 00:40

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.

score 10 · Answer 6 · edited May 01 '22 at 12:01

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.

score 9 · Answer 7 · answered Jun 23 '20 at 03:13

9

Simply update react-scripts to the latest version.

yarn add react-scripts@latest

OR IF USING NPM

npm install react-scripts@latest

answered Jun 23 '20 at 03:13

paulobunga

277
6
13

Unknown Unknowns · Answer 8 · 2021-07-23T18:35:18.653

7

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

edited Jul 23 '21 at 18:35

answered Jul 21 '21 at 18:32

Unknown Unknowns

71
1
4

Quick tip : You can add code fences on the code to make it more readable – I_love_vegetables Jul 22 '21 at 05:44
That is better, thank you for the advice. – Unknown Unknowns Jul 23 '21 at 18:35
confirming; i had react-scripts 3.4.0. then i ran npm audit fix, which updated react-scripts to 3.4.4, where this error started happening. once i did this command, the react-scripts updated to 5.0.0. after that, this error did not happen anymore. – HX_unbanned Jan 24 '22 at 21:25

score 4 · Answer 9 · edited Apr 22 '20 at 19:42

4

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

edited Apr 22 '20 at 19:42

M--

25,431
8
61
93

answered Mar 06 '20 at 00:16

edebo

51
2

score 2 · Answer 10 · edited Mar 29 '20 at 02:23

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!).

score 2 · Answer 11 · answered May 28 '20 at 20:53

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.

score 2 · Answer 12 · answered Feb 22 '22 at 21:42

2

Switching from powershell to bash fixed this problem for me.

answered Feb 22 '22 at 21:42

Dr. Hilarius

1,134
1
14
20

score 2 · Answer 13 · answered Apr 28 '22 at 19:10

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.

score 2 · Answer 14 · answered Dec 12 '22 at 17:25

2

I had in the same directory package.json, package-lock.json and yarn.lock. It helped me to delete yarn.lock directory. It was somehow added to my project even though I did not want to use yarn

answered Dec 12 '22 at 17:25

Przemek

647
2
8
25

score 1 · Answer 15 · answered Mar 18 '20 at 17:26

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.

score 1 · Answer 16 · answered Mar 20 '20 at 09:17

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

score 1 · Answer 17 · answered Feb 08 '21 at 20:22

1

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

answered Feb 08 '21 at 20:22

Grinn

5,370
38
51

score 1 · Answer 18 · answered Jun 03 '21 at 12:26

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.

score 1 · Answer 19 · answered Nov 24 '21 at 04:28

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.

score 1 · Answer 20 · answered Oct 25 '22 at 00:32

1

If you have added a package in package.json and you removed it. remember to delete any configuration added in /config/plugin.js or anywhere else related to that package.

answered Oct 25 '22 at 00:32

Mohammed_7aafar

385
1
6
9

score 0 · Answer 21 · edited May 24 '20 at 04:57

0

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:
Here we go.. npm start...wao

edited May 24 '20 at 04:57

MartenCatcher

2,713
8
26
39

answered May 24 '20 at 03:45

Rahul Daksh

212
1
7

score 0 · Answer 22 · answered Sep 02 '20 at 09:29

0

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

answered Sep 02 '20 at 09:29

champion-runner

1,489
1
13
26

score 0 · Answer 23 · answered Oct 30 '20 at 16:33

0

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

answered Oct 30 '20 at 16:33

Lorenz Weiß

279
3
10

score 0 · Answer 24 · answered Nov 28 '20 at 17:25

0

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"
},

answered Nov 28 '20 at 17:25

chaitan94

2,153
1
18
19

score 0 · Answer 25 · answered Jan 23 '21 at 23:37

0

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

answered Jan 23 '21 at 23:37

Fredster

776
1
6
16

Pedro Emilio Borrego Rached · Answer 26 · 2021-02-02T14:27:19.167

0

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

nvm alias default 12.XX.X

edited Feb 02 '21 at 14:27

answered Feb 02 '21 at 14:17

Pedro Emilio Borrego Rached

316
3
10

score 0 · Answer 27 · answered Apr 24 '21 at 10:24

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.

Ankur Goyal · Answer 28 · 2021-06-24T04:39:14.423

0

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/

edited Jun 24 '21 at 04:39

answered Jun 24 '21 at 03:59

Ankur Goyal

1
1

score 0 · Answer 29 · answered Jun 14 '22 at 08:38

In my case, I previously changed the folder path, and then only I got that error when using npm start.

So, I changed the folder path C:\Users\User\Documents\### Coding\todo-app into C:\Users\User\Documents\Coding\todo-app and then it worked.

I think the problem was using those special characters in the folder name.

score 0 · Answer 30 · answered Sep 06 '22 at 19:35

0

A very similar (misleading) error also occurs when running the react-native bundle command without arguments.

Provide both --entry-file and --bundle-output for a successful run:

react-native bundle --entry-file ./index.js --bundle-output ./index.jsbundle

answered Sep 06 '22 at 19:35

friederbluemle

33,549
14
108
109

score 0 · Answer 31 · answered Aug 09 '23 at 21:13

0

I have no idea why this error started happening for me.

I'm not using react-scripts, I'm not even using webpack. I'm using VITE.

I have a test suite failing:

And I get this SAME error when I try to use my vscode extension "BannerComments+":

answered Aug 09 '23 at 21:13

Devin Rhode

23,026
8
58
72

score 0 · Answer 32 · answered Aug 20 '23 at 21:25

0

I fixed this by deleting Firebase Hosting cache folder:

.firebase

I am not using react-scripts although I was before I converted to vite. Also, my issue occurred when deploying to a new firebase project.

answered Aug 20 '23 at 21:25

dustydojo

449
5
14

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

32 Answers32

Linked