我正在创建一个带有OAuth Google API的ReactJS应用程序。由于某种原因，当我将Google客户端ID直接赋给App.js中的CLIENT_ID变量时，一切都按预期运行。但是，如果我将相同的字符串放入.env并从那里获取它，然后我从OAuth得到一个401错误（客户端ID无效）。奇怪的是，我仍然可以记录CLIENT_ID，它不是未定义的，空的或以某种方式与谷歌客户端ID不同。
可能出了什么问题？

应用程序js

import { useState, useEffect } from "react";
import useScript from "./useScript";

function App() {
  const api = useScript("https://apis.google.com/js/api.js");
  const client = useScript("https://accounts.google.com/gsi/client");

  const [login, setLogin] = useState("Authorize");

  /* exported gapiLoaded */
  /* exported gisLoaded */
  /* exported handleAuthClick */
  /* exported handleSignoutClick */
  /* global gapi */
  /* global google */

  const CLIENT_ID = process.env.REACT_APP_GOOGLE_CLIENT_ID;
  const API_KEY = process.env.REACT_APP_GOOGLE_API_KEY;

  const DISCOVERY_DOC =
    "https://www.googleapis.com/discovery/v1/apis/people/v1/rest";

  const SCOPES = "https://www.googleapis.com/auth/contacts.readonly";

  let tokenClient;
  let gapiInited = false;
  let gisInited = false;

  const gapiLoaded = () => {
    gapi.load("client", initializeGapiClient);
  };

  const initializeGapiClient = async () => {
    await gapi.client.init({
      apiKey: API_KEY,
      discoveryDocs: [DISCOVERY_DOC]
    });
    gapiInited = true;
    maybeEnableButtons();
  };

  const gisLoaded = () => {
    tokenClient = google.accounts.oauth2.initTokenClient({
      client_id: CLIENT_ID,
      scope: SCOPES,
      callback: "" // defined later
    });
    gisInited = true;
    maybeEnableButtons();
  };

  const maybeEnableButtons = () => {
    if (gapiInited && gisInited) {
      document.getElementById("authorize_button").style.visibility = "visible";
    }
  };

  const handleAuthClick = () => {
    tokenClient.callback = async (resp) => {
      if (resp.error !== undefined) {
        throw resp;
      }
      if (document.getElementById("signout_button") !== null) {
        setLogin("Refresh");
      }
    };

    if (gapi.client.getToken() === null) {
      tokenClient.requestAccessToken({ prompt: "consent" });
    } else {
      tokenClient.requestAccessToken({ prompt: "" });
    }
  };

  const handleSignoutClick = () => {
    const token = gapi.client.getToken();
    if (token !== null) {
      google.accounts.oauth2.revoke(token.access_token);
      gapi.client.setToken("");
      setLogin("Authorize");
    }
  };

  useEffect(() => {
    if (login === "Authorize") {
      document.getElementById("signout_button").classList.add("hidden");
    } else {
      document.getElementById("signout_button").classList.remove("hidden");
    }
  }, [login]);

  return (
    <>
      {api === "ready" ? gapiLoaded() : api}
      {client === "ready" ? gisLoaded() : client}

      <div className="bg-gray-100 w-full min-h-screen h-full px-2 py-10">
        <div className="bg-white max-w-2xl mx-auto p-4">
          <button
            id="authorize_button"
            onClick={handleAuthClick}
            className="p-2 text-white font-semibold rounded bg-cyan-600 hover:bg-cyan-700"
          >
            {login}
          </button>
          <button
            id="signout_button"
            onClick={handleSignoutClick}
            className="p-2 text-white font-semibold rounded bg-gray-400 hover:bg-gray-500 ml-2"
          >
            Sign Out
          </button>
        </div>
      </div>
    </>
  );
}

export default App;

.环境

REACT_APP_GOOGLE_CLIENT_ID = 'xxxxxxxxxxxxxxxx',
REACT_APP_GOOGLE_API_KEY = 'xxxxxxxxxxxxxxxx',

使用脚本.js

import { useState, useEffect } from "react";

function useScript(src) {
  const [status, setStatus] = useState(src ? "loading" : "idle");
  useEffect(
    () => {
      if (!src) {
        setStatus("idle");
        return;
      }
      let script = document.querySelector(`script[src="${src}"]`);
      if (!script) {
        script = document.createElement("script");
        script.src = src;
        script.async = true;
        script.setAttribute("data-status", "loading");
        document.body.appendChild(script);
        const setAttributeFromEvent = (event) => {
          script.setAttribute(
            "data-status",
            event.type === "load" ? "ready" : "error"
          );
        };
        script.addEventListener("load", setAttributeFromEvent);
        script.addEventListener("error", setAttributeFromEvent);
      } else {
        setStatus(script.getAttribute("data-status"));
      }

      const setStateFromEvent = (event) => {
        setStatus(event.type === "load" ? "ready" : "error");
      };

      script.addEventListener("load", setStateFromEvent);
      script.addEventListener("error", setStateFromEvent);

      return () => {
        if (script) {
          script.removeEventListener("load", setStateFromEvent);
          script.removeEventListener("error", setStateFromEvent);
        }
      };
    },
    [src] // Only re-run effect if script src changes
  );
  return status;
}
export default useScript;