React environment variables error 'Unexpected token' in firebase config

Question

I'm running a react project with a backend in firebase and I'm trying to setup a.env file for the configuration settings.

When I run 'npm start', I get a parsing error: Unexpected token, expected "," after the word 'process' inside the 'const firebaseConfig' settings.

Here are the pertinent files:

firebase-config.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "@firebase/firestore";

const firebaseConfig = {
    apiKey: {process.env.REACT_APP_API_KEY} //error occurs at the dot '.' after the word 'process'
    authDomain: {process.env.REACT_APP_AUTHDOMAIN}
    projectId: {process.env.REACT_APP_PROJECTID}
    storageBucket: {process.env.REACT_APP_STORAGE_BUCKET}
    messagingSenderId: {process.env.REACT_APP_MESSAGING_SENDER_ID}
    appId: {process.env.REACT_APP_APP_ID}
    measurementId: {process.env.REACT_APP_MEASUREMENT_ID}

};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

.env (in the root folder)

REACT_APP_API_KEY="<the actual firebase config settings here>"
REACT_APP_AUTHDOMAIN="<the actual firebase config settings here>"
REACT_APP_PROJECTID="<the actual firebase config settings here>"
REACT_APP_STORAGE_BUCKET="<the actual firebase config settings here>"
REACT_APP_MESSAGING_SENDER_ID="<the actual firebase config settings here>"
REACT_APP_APP_ID="<the actual firebase config settings here>"
REACT_APP_MEASUREMENT_ID="<the actual firebase config settings here>"

package.json

{
  "name": "react_tut",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@firebase/firestore": "^3.4.2",
    "dotenv": "^10.0.0",
    "env-cmd": "^10.1.0",
    "firebase": "^9.6.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "^5.0.0",
    "web-vitals": "^2.1.3"
  },
  "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"
    ]
  }
}

Thanks in advance.

Answer 1

JavaScript's ES6 syntax lets you do this:

const a = 4;
const x = { z: { a } };

but not this:

const a = { b: 4 };
const x = { z: { a.b } };

To get it to work, do

const a = { b: 4 };
const x = { z: { b: a.b } };

Solution (stuff should not be in curly brackets):

const firebaseConfig = {
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AUTHDOMAIN,
    projectId: process.env.REACT_APP_PROJECTID,
    storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_APP_ID,
    measurementId: process.env.REACT_APP_MEASUREMENT_ID

};