[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


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

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

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

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


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


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.


Simply update react-scripts to the latest version.

yarn add react-scripts@latest

OR IF USING NPM

npm install react-scripts@latest

  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


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

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


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.


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

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

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


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

nvm alias default 12.XX.X

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

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


Questions with javascript tag:

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 Drag and drop menuitems Is it possible to execute multiple _addItem calls asynchronously using Google Analytics? DevTools failed to load SourceMap: Could not load content for chrome-extension TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app What does 'x packages are looking for funding' mean when running `npm install`? SyntaxError: Cannot use import statement outside a module SameSite warning Chrome 77 "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6 Why powershell does not run Angular commands? Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; } Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Push method in React Hooks (useState)? JS file gets a net::ERR_ABORTED 404 (Not Found) React Hooks useState() with Object useState set method not reflecting change immediately Can't perform a React state update on an unmounted component UnhandledPromiseRejectionWarning: This error originated either by throwing inside of an async function without a catch block Can I set state inside a useEffect hook internal/modules/cjs/loader.js:582 throw err How to post query parameters with Axios? How to use componentWillMount() in React Hooks? React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory in ionic 3 How can I force component to re-render with hooks in React? What is useState() in React? How to call loading function with React useEffect only once Objects are not valid as a React child. If you meant to render a collection of children, use an array instead How to reload current page? Center content vertically on Vuetify Getting all documents from one collection in Firestore ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment How can I add raw data body to an axios request? Sort Array of object by object field in Angular 6 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) Axios Delete request with body and headers? Enable CORS in fetch api Vue.js get selected option on @change Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) Angular 6: How to set response type as text while making http call

Questions with reactjs tag:

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 Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop react hooks useEffect() cleanup for only componentWillUnmount? How to use callback with useState hook in react Push method in React Hooks (useState)? React Hooks useState() with Object useState set method not reflecting change immediately Can't perform a React state update on an unmounted component React hooks useState Array Can I set state inside a useEffect hook TypeScript and React - children type? Why do I keep getting Delete 'cr' [prettier/prettier]? How to use componentWillMount() in React Hooks? How to compare oldValues and newValues on React Hooks useEffect? React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing Receiving "Attempted import error:" in react app How can I force component to re-render with hooks in React? What is useState() in React? How to call loading function with React useEffect only once expected assignment or function call: no-unused-expressions ReactJS Objects are not valid as a React child. If you meant to render a collection of children, use an array instead Support for the experimental syntax 'classProperties' isn't currently enabled How can I add raw data body to an axios request? Axios Delete request with body and headers? Enable CORS in fetch api Axios having CORS issue How to center a component in Material-UI and make it responsive? What exactly is the 'react-scripts start' command? how to download file in react js react button onClick redirect page Local package.json exists, but node_modules missing Upgrading React version and it's dependencies by reading package.json What is {this.props.children} and when you should use it? How to use lifecycle method getDerivedStateFromProps as opposed to componentWillReceiveProps Adding an .env file to React Project React : difference between <Route exact path="/" /> and <Route path="/" /> You should not use <Link> outside a <Router> ReactJS: Maximum update depth exceeded error Functions are not valid as a React child. This may happen if you return a Component instead of from render where is create-react-app webpack config and files? React Native: JAVA_HOME is not set and no 'java' command could be found in your PATH

Questions with redux tag:

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? Axios get in url works but with second parameter as object it doesn't How do I add an element to array in reducer of React native redux? Checking for Undefined In React What is mapDispatchToProps? What is the best way to access redux store outside a react component? Deep copy in ES6 using the spread syntax How do I access store state in React Redux? Fetch: reject promise and catch the error if status is not OK? Understanding React-Redux and mapStateToProps() Re-render React component when prop changes Can I dispatch an action in reducer? Invariant Violation: Could not find "store" in either the context or props of "Connect(SportsDatabase)" Accessing Redux state in an action creator? How to update single value inside specific array item in redux How can I display a modal dialog in Redux that performs asynchronous actions? How to reset the state of a Redux store? 'dispatch' is not a function when argument to mapToDispatchToProps() in Redux How to dispatch a Redux action with a timeout? Pros/cons of using redux-saga with ES6 generators vs redux-thunk with ES2017 async/await Why do we need middleware for async flow in Redux? Why use Redux over Facebook Flux?

Questions with visual-studio-code tag:

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? Is there any way to set environment variables in Visual Studio Code? How to connect TFS in Visual Studio code How to shift a block of code left/right by one space in VSCode? How to add a new project to Github using VS Code Is there a way to remove unused imports and declarations from Angular 2+? How to create a Java / Maven project that works in Visual Studio Code? Select all occurrences of selected word in VSCode How to see local history changes in Visual Studio Code? VSCode cannot find module '@angular/core' or any other modules #include errors detected in vscode ESLint not working in VS Code? Visual Studio Code - Target of URI doesn't exist 'package:flutter/material.dart' What is a 'workspace' in Visual Studio Code? VSCode Change Default Terminal Visual Studio Code Search and Replace with Regular Expressions Visual Studio Code open tab in new window Activating Anaconda Environment in VsCode Error message "Linter pylint is not installed" Switch focus between editor and integrated terminal in Visual Studio Code Collapse all methods in Visual Studio Code How do I use Bash on Windows from the Visual Studio Code integrated terminal? Changing the git user inside Visual Studio Code Color theme for VS Code integrated terminal How to compare different branches in Visual Studio Code How to restart VScode after editing extension's config? Moving Panel in Visual Studio Code to right side Restore a deleted file in the Visual Studio Code Recycle Bin VSCode: How to Split Editor Vertically Install a Nuget package in Visual Studio Code How to indent/format a selection of code in Visual Studio Code with Ctrl + Shift + F How to change the integrated terminal in visual studio code or VSCode PHP executable not found. Install PHP 7 and add it to your PATH or set the php.executablePath setting How to do tag wrapping in VS code? Debug/run standard java in Visual Studio Code IDE and OS X? Visual Studio Code: How to show line endings How do you format code on save in VS Code Is there a quick change tabs function in Visual Studio Code? Duplicate line in Visual Studio Code Open files always in a new tab In Visual Studio Code How do I merge between two local branches?

Questions with yarnpkg tag:

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?