Could not reach cloud firestore back end on deployed version only

Question

The project is deployed using Vercel - as part of that process I added my firebase security / project details as environment variables on the Vercel dashboard.

Auth works properly when deployed, but this is the error in the console:

@firebase/firestore: Firestore (7.17.2): Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=invalid-argument]: Project id "my-project-id" is malformed: it either contains invalid characters or is too long. Look at https://cloud.google.com/resource-manager/docs/creating-managing-projects#identifying_projects for instructions in how to get a project's id. This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

My dependencies in package.json:

  "dependencies": {
    "@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "firebase": "^7.15.5",
    "firebase-admin": "^8.12.1",
    "js-cookie": "2.2.1",
    "next": "latest",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-firebaseui": "4.1.0",
    "swr": "0.2.3"

I'm not sure what parts of my code will be most useful.. Below are the code snippets that currently work locally, but not when deployed.

(handleSubmit on form)

const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) var user = firebase.auth().currentUser;
    var db = firebase.firestore();
    db.collection("users")
      .doc(user.uid)
      .collection("clients")
      .doc()
      .set({
        name: values.fullName,
        email: values.email,
        tel: values.mobile,
        postcode: values.postcode,
      })
      .then(function () {
        console.log("Document Succesfully Written");
      })
      .catch(function (error) {
        console.error("Error writing document: ", error);
      });
  };

(View list of client docs)

const Clients = () => {
  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      const db = firebase.firestore();
      db.collection("users")
        .doc(user.uid)
        .collection("clients")
        .onSnapshot((snap) => {
          const clients = snap.docs.map((doc) => ({
            id: doc.id,
            ...doc.data(),
          }));
          setClients(clients);
        });
    } else {
      [];
    }
  });

  const [clients, setClients] = useState([]);

  return (
    <div>
      <ul>
        {clients.map((client) => (
          <li key={client.id}>{client.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Clients;

704 704 · Accepted Answer · 2020-09-10T13:52:18

I think this error deserves a better answer - because i'm still not really sure why it happened. I deleted and replaced my environment variable in the Vercel dashboard without changing its contents. I redeployed and no longer get errors - the read/write happens properly.

Could not reach cloud firestore back end on deployed version only

1 Answers