4

I need to use .env file in the firebase-messaging-sw.js located at public folder in the ReactJs. The .env file is located in project root folder and I need to use it in the firebase-messaging-sw.js without moving .env to another location. but When the environment variables was called in firebase-messaging-sw.js. I get the the reference error "process is not defined at firebase-messaging-sw.js" in ReactJs

This is my code in the firebase-messaging-sw.js.

importScripts('https://www.gstatic.com/firebasejs/7.8.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.8.1/firebase-messaging.js');

const config = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId:  process.env.REACT_APP_FIREBASE_APP_ID,
};

firebase.initializeApp(config);
const messaging = firebase.messaging();

Is there an any idea to solve my problem?

randika
  • 63
  • 4
  • React JS is front end. `process.env` object is provide in Node JS environment. However you can configure the Webpack to load the data from `process.env` using `dotenv` package. But when you build the react project, values will be replaced to the actual values so that anyone will able to see those keys using browser development tool. – Dilshan Sep 30 '20 at 09:44
  • I have .env file also in the src folder (root/src) , then isn't there a solution to this. – randika Oct 10 '20 at 07:18
  • any update on the issue? i have the same .env file and get this error – Evaa Jan 14 '23 at 14:12

1 Answers1

2

firebase-messaging-sw.js is executed on the client side, that's why you cannot access any process global variable.

Francesco Colamonici
  • 1,147
  • 1
  • 10
  • 16