在 Firebase 配置中反应环境变量错误“意外令牌”

Question

我在 firebase 中运行一个带有后端的 react 项目，我正在尝试为配置设置设置一个 .env 文件。

当我运行 'npm start' 时，我收到一个解析错误：Unexpected token, expected "," 在 'const firebaseConfig' 设置中的单词 'process' 之后。

以下是相关文件：

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（在根文件夹中）

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"
    ]
  }
}

提前致谢。

Answer 1

JavaScript 的 ES6 语法允许您这样做：

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

但不是这个：

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

要让它工作，做

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

解决方案（东西不应该放在大括号中）：

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

};