React + TypeScript + Vite の構成で、Googleスプレッドシートの読み書きを行うコードをGoogle Sheets APIを使用し localhost 環境でテストしています。
GoogleCloudConsole側では、「承認済みのJavaScript生成元」に http://localhost:5173 を指定済みです。
google-spreadsheet ライブラリ(https://www.npmjs.com/package/google-spreadsheet )を使用し、公式リファレンスに従って以下のようなコードを書いています。
main.tsx(アプリ起動部分)
import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import "./scss/pages/main/index.scss"; import { SheetAction } from "./SheetAction"; createRoot(document.getElementById("root")!).render( <StrictMode> <SheetAction /> </StrictMode> );
SheetAction.tsx(スプレッドシート読み込み処理)
import { GoogleSpreadsheet } from "google-spreadsheet"; import { JWT } from "google-auth-library"; const serviceAccountAuth = new JWT({ email: import.meta.env.VITE_GOOGLE_SERVICE_ACCOUNT_EMAIL, key: import.meta.env.VITE_GOOGLE_PRIVATE_KEY, scopes: ["https://www.googleapis.com/auth/spreadsheets"], }); const doc = new GoogleSpreadsheet( import.meta.env.VITE_GOOGLE_SHEETS_DOC_ID, serviceAccountAuth ); await doc.loadInfo(); console.log(doc.title); export const SheetAction: React.FC = () => { return ( <div> <h1>hoge</h1> </div> ); };
npm run dev にて開発サーバーを起動してブラウザで確認したところ、
Uncaught ReferenceError: process is not defined
のエラーが発生し、原因が分かりません。
エラーの原因と、正しい設定方法をご存知の方がいればご教示いただけますと幸いです。

あなたの回答
tips
プレビュー