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.
To fix this issue simply upgrade react-scripts package (check latest version with npm info react-scripts version):
"react-scripts": "^3.x.x" with "react-scripts": "^3.4.1" (or the latest available version)npm install or yarn installSome people reported that this issue was caused by running npm audit fix (avoid it!).
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.
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).
node_modules\ folderpackage-lock.json filepackage.json file from "react-scripts": "3.x.x" to "react-scripts": "^3.4.1"npm inpm startAnd it works!!
We ejected from react-scripts and so could not simply upgrade the package.json entry to fix this.
Instead, we did this:
1.) in a new directory, create a new project -> $> npx create-react-app foo-project
2.) and then eject it -> cd ./foo-project && npm run eject
3.) 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.
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.
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:
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!).
If you have an ejected create-react-app, I would suggest:
create-react-app.npm run eject or yarn eject.package.json.Worked for me.
I tried various approach described above but none of them worked since I have ejected my css. Finally applying following steps helped:
react-scripts from "react-scripts": "3.x.x" to "react-scripts": "^3.4.0"react-dev-utils form "react-dev-utils": "^10.x.x" to "react-dev-utils": "10.0.0"node-modules folder and package-lock.json/yarn.locknpm install/yarn installI 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
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.
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.
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
const path = require( "path" )and then usingpathto join a subdirectory likepath.join( myDirectoryName ). However,myDirectoryNamewas sometimesnulland that's what was causing this error to occur. - Joshua Pinteryarn rw upgrade. Reverting that commit and runningyarn installagain (to downgrade) fixed the problem for me. I'll figure out the Redwood upgrade later. - Ryan