Firebase with react: TypeError: Path must be a string. Received undefined

Question

I am trying to figure out how to configure react to use firestore as a back end.

I just started a new app to try again with the authentication module.

This time around, when I started the local host, I get an error that says:

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

I tried deleting node_modules and yarn.lock and then yarn install to make those files again. The same error is generated.

I have seen this post and tried each of the suggestions in it - by installing firebase-admin but the suggestion in the answer by Ben Winding is to make sure source is defined in firebase.json as:

{
  "functions": {
    "predeploy": "npm run build",
    "source": "."
  }
}

I don't have a functions section at all. The only place I have source defined is in rewrites - as:

"rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]

Is that incorrect? I had it this way in the previous app I tried to make and it loaded fine.

I have a separate folder called functions/package.json which has:

{
  "name": "functions",
  "description": "Cloud Functions for Firebase",
  "scripts": {
    "serve": "firebase serve --only functions",
    "shell": "firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "dependencies": {
    "firebase-admin": "~6.0.0",
    "firebase-functions": "^2.1.0"
  },
  "private": true
}

Does anyone know how to solve this problem? I don't know how to make sense from the error message to have ideas about what to try next.

Answer 1

npm update react-scripts

after running this command, which resolved the issue.