Firebase Nuxt Does Not Recognize 'location' Object When Trying to Run The Whole App With Firebase Emulator

user_5174054 0
Viewed 111

My firebase Nuxt app was recently converted to SSR from SPA mode. It was all working fine in SPA mode but when I tried to convert it, it generated a lot of errors. I tried to solve them one by one and I'm stuck with the error ReferenceError 'location' was not defined. I want to run my emulator because I want to test my other functions if it is running completely in SSR mode.

import firebaseTmp from "firebase/app";
import firebaseErrorsJa from "~/plugins/firebaseErrorsJa";
import "firebase/storage";
import "firebase/firestore";
import 'firebase/auth';
import 'firebase/functions';

const config = process.env.firebaseConfig;

if (!firebaseTmp.apps.length) {
  firebaseTmp.initializeApp(config);
}
const db = firebaseTmp.firestore();
const functions = firebaseTmp.functions();
const firebase = firebaseTmp;
const firestore = firebaseTmp.firestore();
const storage = firebaseTmp.storage();
const auth = firebaseTmp.auth();
const firestoreTimestamp = firebaseTmp.firestore.Timestamp;
const serverTimestamp = firebaseTmp.firestore.FieldValue.serverTimestamp();
const firebaseErrors = firebaseErrorsJa;

if (location.hostname === "localhost") {
  db.settings({
    host: "localhost:8000",
    ssl: false
  });

  functions.useEmulator("localhost", 5001);
  auth.useEmulator('http://localhost:9099/');
}

export { db, firebase, firestore, auth, storage, firestoreTimestamp, serverTimestamp, functions, firebaseErrors }

I imported almost all libraries but still it does not work. TAKE NOTE: This only happens when it is in SSR mode. Does this mean that location does not work in SSR mode?

I tried to take away the chunk of code that has 'location' in it. It works perfectly well locally but when I try to run my other functions, it generates CORS error. It accesses the link being used when we deploy our functions.

https://us-central1-talkfor-dev.cloudfunctions.net/v1-auth-updateUser

  • This is the link that was shown in the console

What I expected is that us-central1-talkfor-dev.cloudfunctions.net will be localhost:5000 since we are using the local development.

Do you have any Idea why is it like this?

nuxt.js firebase vue.js
1 Answers

Alex you understand that SSR mode is trying to render the website on the server. This can be your local running server instance, that means there is no window object for it to access location variable. Location is only accessible inside the browser. The SSR context is not in the browser, hence makes total sense.

Window.location here states.

Location Object

Server vs Browser environments here states that

Because you are in a Node.js environment... You do not have access to the window or document objects... You can however use window or document by using the beforeMount or mounted hooks. .

Why don't you try either of these,

  • use these beforeMount and mounted hooks like this.
beforeMount () {
  window.alert('hello');
}
mounted () {
  window.alert('hello');
}
  • using the process.client environment variable
if (process.client) {
  // Do your stuff here
  // I think this is what you are looking for.
}
user_105802310
Related