React "TypeError: Path must be a string. Received undefined" while upgrading dependencies

Question

While upgrading dependencies to the latest version, my mern stack app crashed and I got a typeError message

TypeError: Path must be a string. Received undefined

Can anyone help? Thanks in advance. Here's the error:

TypeError: Path must be a string. Received undefined
at assertPath (path.js:28:11)
at Object.join (path.js:489:7)
at noopServiceWorkerMiddleware (C:\Projects\react-portfolio\comfort-app\node_modules\react-dev-utils\noopServiceWorkerMiddleware.js:14:26)
at Layer.handle [as handle_request] (C:\Projects\react-portfolio\comfort-app\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\Projects\react-portfolio\comfort-app\node_modules\express\lib\router\index.js:317:13)
at C:\Projects\react-portfolio\comfort-app\node_modules\express\lib\router\index.js:284:7
at Function.process_params (C:\Projects\react-portfolio\comfort-app\node_modules\express\lib\router\index.js:335:12)
at next (C:\Projects\react-portfolio\comfort-app\node_modules\express\lib\router\index.js:275:10)
at launchEditorMiddleware (C:\Projects\react-portfolio\comfort-app\node_modules\react-dev-utils\errorOverlayMiddleware.js:20:7)
at Layer.handle [as handle_request] (C:\Projects\react-portfolio\comfort-app\node_modules\express\lib\router\layer.js:95:5)
at trim_prefix (C:\Projects\react-portfolio\comfort-app\node_modules\express\lib\router\index.js:317:13)
at C:\Projects\react-portfolio\comfort-app\node_modules\express\lib\router\index.js:284:7
at Function.process_params (C:\Projects\react-portfolio\comfort-app\node_modules\express\lib\router\index.js:335:12)
at next (C:\Projects\react-portfolio\comfort-app\node_modules\express\lib\router\index.js:275:10)
at handleWebpackInternalMiddleware (C:\Projects\react-portfolio\comfort-app\node_modules\react-dev-utils\evalSourceMapMiddleware.js:42:7)
at Layer.handle [as handle_request] (C:\Projects\react-portfolio\comfort-app\node_modules\express\lib\router\layer.js:95:5)    

package.json file Here:

{
  "name": "comfort-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "axios": "^0.19.1",
    "bootstrap": "^4.4.1",
    "cloudinary-core": "^2.8.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Should I downgrade to the previous version of yarn ? I'm afraid if I do I will get more errors. Any thoughts..?

Answer 1

This is a bug that was fixed in react-script@3.4.0, change the react-scripts in your package.json to "react-scripts": "3.4.0", and run yarn install or you can just do:

yarn add react-scripts@3.4.0