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

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.

This question is related to javascript reactjs redux visual-studio-code yarnpkg

The answer is


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


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

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

    showing the command to install npm

  4. Here we go.. npm start...wao


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

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

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:

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

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

  1. Go to you package.json

  2. Change "react-scripts": "3.x.x" to "react-scripts": "^3.4.0" in the dependencies

  3. Reinstall react-scripts: npm I react-scripts

  4. Start your project: npm start


Running npm i [email protected] solved my issue.


Simply update react-scripts to the latest version.

yarn add react-scripts@latest

OR IF USING NPM

npm install react-scripts@latest

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


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

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.


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.


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


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 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 fixed this issue by setting a newer version of node as default in nvm i.e.:

nvm alias default 12.XX.X

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

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

And it works!!


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.


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to reactjs

Error: Node Sass version 5.0.0 is incompatible with ^4.0.0 TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app Template not provided using create-react-app How to resolve the error on 'react-native start' Element implicitly has an 'any' type because expression of type 'string' can't be used to index Invalid hook call. Hooks can only be called inside of the body of a function component How to style components using makeStyles and still have lifecycle methods in Material UI? React Hook "useState" is called in function "app" which is neither a React function component or a custom React Hook function How to fix missing dependency warning when using useEffect React Hook? Unable to load script.Make sure you are either running a Metro server or that your bundle 'index.android.bundle' is packaged correctly for release

Examples related to redux

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Receiving "Attempted import error:" in react app Local package.json exists, but node_modules missing What is the best way to redirect a page using React Router? How do I fix "Expected to return a value at the end of arrow function" warning? ReactJS lifecycle method inside a function Component How to overcome the CORS issue in ReactJS Attach Authorization header for all axios requests React - Display loading screen while DOM is rendering?

Examples related to visual-studio-code

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app Visual Studio Code PHP Intelephense Keep Showing Not Necessary Error Cannot edit in read-only editor VS Code How to setup virtual environment for Python in VS Code? Pylint "unresolved import" error in Visual Studio Code Why do I keep getting Delete 'cr' [prettier/prettier]? How to set up devices for VS Code for a Flutter emulator VSCode single to double quote automatic replace js 'types' can only be used in a .ts file - Visual Studio Code using @ts-check How can I clear the terminal in Visual Studio Code?

Examples related to yarnpkg

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app Module not found: Error: Can't resolve 'core-js/es6' Yarn: How to upgrade yarn version using terminal? Yarn install command error No such file or directory: 'install' How to install package from github repo in Yarn How Do I Uninstall Yarn How to clear cache in Yarn?