[PR #8212] [AI] refactor(build): replace process.env with import.meta.env in browser code #127075

Open
opened 2026-06-14 06:37:40 -05:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/actualbudget/actual/pull/8212
Author: @StephenBrown2
Created: 6/13/2026
Status: 🔄 Open

Base: masterHead: refactor/client-import-meta-env


📝 Commits (2)

  • e58d12d [AI] refactor(desktop-client): use import.meta.env for REACT_APP_* in client-only code
  • 3c5a0e0 [AI] refactor(build): remove process shim by migrating remaining browser process.env reads

📊 Changes

11 files changed (+51 additions, -52 deletions)

View changed files

📝 packages/desktop-client/src/browser-preload.js (+4 -4)
📝 packages/desktop-client/src/build-shims.js (+0 -10)
📝 packages/desktop-client/src/components/App.tsx (+1 -1)
📝 packages/desktop-client/src/components/DevelopmentTopBar.tsx (+2 -2)
📝 packages/desktop-client/src/components/FinancesApp.tsx (+1 -1)
📝 packages/desktop-client/src/hooks/useThemeCatalog.ts (+1 -1)
📝 packages/desktop-client/src/util/versions.ts (+1 -1)
📝 packages/desktop-client/vite.config.mts (+4 -32)
📝 packages/loot-core/package.json (+10 -0)
packages/loot-core/src/shared/environment.browser.ts (+21 -0)
upcoming-release-notes/8212.md (+6 -0)

📄 Description

Description

When working on #8167, I found that the process shim ended up causing issues, and thus https://github.com/actualbudget/actual/pull/8167/changes#diff-0e6fef7455523934cb77c75830efeab442577bc3a3a259d93924cfb1affd7e57R96 was born.
Then I thought: Why is this even needed in the first place? So I asked Claude to switch all browser-side code from process.env.REACT_APP_* to Vite's native import.meta.env.REACT_APP_*, and remove the process shim from the build pipeline entirely.

process does not exist in the browser, so these reads only worked via a build-time process shim and were sensitive to chunk placement: a module-level read in useThemeCatalog.ts could land in the eagerly-loaded entry chunk and throw ReferenceError: process is not defined at startup (white screen, every e2e test timing out). import.meta.env is the idiomatic Vite mechanism (the project already sets envPrefix: 'REACT_APP_'), is statically replaced at build time, and removes that landmine permanently.

This is a follow-up cleanup to the build shim added in #8167 (see the inline discussion there).

Commits

Commit 1: migrate callsites in client-only component files

  • src/hooks/useThemeCatalog.tsREACT_APP_BRANCH (module-level; this was the startup detonator)
  • src/components/App.tsxREACT_APP_REVIEW_ID
  • src/components/DevelopmentTopBar.tsxREACT_APP_REVIEW_ID
  • src/components/FinancesApp.tsxREACT_APP_IS_PIKAPODS
  • src/util/versions.tsREACT_APP_REVIEW_ID

Commit 2: migrate the bootstrap and remove the shim machinery

  • src/browser-preload.jsNODE_ENV, REACT_APP_REVIEW_ID, PUBLIC_URL, REACT_APP_BACKEND_WORKER_HASH all migrated to import.meta.env
  • loot-core/src/shared/environment.browser.ts (new) — browser variant of environment.ts using import.meta.env.DEV and import.meta.env.REACT_APP_NETLIFY
  • loot-core/package.json — conditional exports for #shared/environment and ./shared/environment: Electron and API builds keep environment.ts (real Node process.env); browser builds route to environment.browser.ts
  • vite.config.mtsprocess and _process removed from both serve and build inject paths; the define-build-process plugin (the process.env_process.env rename workaround) is gone; only the global shim remains
  • src/build-shims.jsprocess export removed; only global remains

No behavior change: unset variables resolve to undefined exactly as before (the surrounding &&/||/?? guards are unaffected).

AI Disclaimer

Commit 1: AI generated (Claude Opus 4.8 via Claude Code).
Commit 2: AI generated (Claude Sonnet 4.6 via Claude Code).

Relates to #8167 (build shim that this cleanup builds on)

Testing

  • Typecheck and lint pass for all changed files.
  • Production browser bundle builds successfully with zero process.env occurrences in runtime JS (only in source maps).
  • The same change was exercised as part of the #8167 stack with the full e2e suite green before being split out onto its own branch.

Checklist

  • Release notes added (see link above)
  • No obvious regressions in affected areas
  • Self-review has been performed - I have read every line of this diff and can explain what each change does and why it is needed

Bundle Stats

Bundle Files count Total bundle size % Changed
desktop-client 37 13.23 MB → 13.23 MB (-1.91 kB) -0.01%
loot-core 1 4.86 MB → 4.86 MB (-57 B) -0.00%
api 2 3.87 MB 0%
cli 1 7.97 MB 0%
crdt 1 11.12 kB 0%
View detailed bundle stats

desktop-client

Total

Files count Total bundle size % Changed
37 13.23 MB → 13.23 MB (-1.91 kB) -0.01%
Changeset
File Δ Size
home/runner/work/actual/actual/packages/loot-core/src/shared/environment.browser.ts 🆕 +441 B 0 B → 441 B
src/reports/index.ts +0 B (0%) 0 B → 0 B
src/transactions/index.ts +0 B (0%) 0 B → 0 B
node_modules/i18next/dist/esm/i18next.js 📉 -45 B (-0.06%) 73.07 kB → 73.03 kB
src/components/FinancesApp.tsx 📉 -39 B (-0.20%) 18.99 kB → 18.95 kB
node_modules/@react-stately/virtualizer/dist/Virtualizer.mjs 📉 -20 B (-0.27%) 7.18 kB → 7.17 kB
node_modules/@react-aria/virtualizer/dist/ScrollView.mjs 📉 -20 B (-0.39%) 5.07 kB → 5.05 kB
home/runner/work/actual/actual/packages/loot-core/src/platform/client/connection/index.ts 📉 -20 B (-0.60%) 3.24 kB → 3.22 kB
src/components/App.tsx 📉 -109 B (-1.29%) 8.28 kB → 8.18 kB
src/browser-preload.js 📉 -84 B (-2.11%) 3.89 kB → 3.81 kB
node_modules/@react-stately/virtualizer/dist/Point.mjs 📉 -20 B (-4.19%) 477 B → 457 B
src/hooks/useThemeCatalog.ts 📉 -57 B (-5.17%) 1.08 kB → 1.02 kB
src/util/versions.ts 📉 -47 B (-5.19%) 906 B → 859 B
src/build-shims.js 📉 -231 B (-62.26%) 371 B → 140 B
home/runner/work/actual/actual/packages/loot-core/src/shared/environment.ts 🔥 -478 B (-100%) 478 B → 0 B
src/components/DevelopmentTopBar.tsx 🔥 -1.19 kB (-100%) 1.19 kB → 0 B
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller

Asset File Size % Changed
static/js/index.js 1.58 MB → 1.58 MB (-1.48 kB) -0.09%
static/js/extends.js 473.99 kB → 473.66 kB (-343 B) -0.07%
static/js/TransactionList.js 82.8 kB → 82.74 kB (-60 B) -0.07%
static/js/Value.js 4.49 MB → 4.49 MB (-37 B) -0.00%

Unchanged

Asset File Size % Changed
static/js/BackgroundImage.js 121.09 kB 0%
static/js/FormulaEditor.js 814.39 kB 0%
static/js/ManageRules.js 46.47 kB 0%
static/js/PayeeRuleCountLabel.js 7.1 kB 0%
static/js/ReportRouter.js 1.25 MB 0%
static/js/ScheduleEditForm.js 146.51 kB 0%
static/js/SchedulesTable.js 203.52 kB 0%
static/js/TransactionEdit.js 90.63 kB 0%
static/js/_baseIsEqual.js 76.76 kB 0%
static/js/ca.js 185.63 kB 0%
static/js/client.js 450.92 kB 0%
static/js/da.js 100.19 kB 0%
static/js/de.js 182.38 kB 0%
static/js/en-GB.js 9.25 kB 0%
static/js/en.js 202.14 kB 0%
static/js/es.js 177.58 kB 0%
static/js/fr.js 177.35 kB 0%
static/js/indexeddb-main-thread-worker-e59fee74.js 13.46 kB 0%
static/js/it.js 163.93 kB 0%
static/js/narrow.js 364.55 kB 0%
static/js/nb-NO.js 147.07 kB 0%
static/js/nl.js 119.71 kB 0%
static/js/pt-BR.js 187.34 kB 0%
static/js/resize-observer.js 18.06 kB 0%
static/js/th.js 173.33 kB 0%
static/js/theme.js 31.01 kB 0%
static/js/toString.js 638.95 kB 0%
static/js/uk.js 216.7 kB 0%
static/js/useFormatList.js 2.52 kB 0%
static/js/useTransactionBatchActions.js 9.71 kB 0%
static/js/wide.js 298.23 kB 0%
static/js/workbox-window.prod.es5.js 7.33 kB 0%
static/js/zh-Hans.js 116.44 kB 0%

loot-core

Total

Files count Total bundle size % Changed
1 4.86 MB → 4.86 MB (-57 B) -0.00%
Changeset
File Δ Size
home/runner/work/actual/actual/packages/loot-core/src/shared/environment.browser.ts 🆕 +309 B 0 B → 309 B
home/runner/work/actual/actual/packages/loot-core/src/shared/environment.ts 🔥 -366 B (-100%) 366 B → 0 B
View detailed bundle breakdown

Added

Asset File Size % Changed
kcab.worker.D0gAGooJ.js 0 B → 4.86 MB (+4.86 MB) -

Removed

Asset File Size % Changed
kcab.worker.DhLbg59B.js 4.86 MB → 0 B (-4.86 MB) -100%

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged
No assets were unchanged


api

Total

Files count Total bundle size % Changed
2 3.87 MB 0%
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
index.js 3.87 MB 0%
models.js 0 B 0%

cli

Total

Files count Total bundle size % Changed
1 7.97 MB 0%
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
cli.js 7.97 MB 0%

crdt

Total

Files count Total bundle size % Changed
1 11.12 kB 0%
View detailed bundle breakdown

Added
No assets were added

Removed
No assets were removed

Bigger
No assets were bigger

Smaller
No assets were smaller

Unchanged

Asset File Size % Changed
index.js 11.12 kB 0%

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/actualbudget/actual/pull/8212 **Author:** [@StephenBrown2](https://github.com/StephenBrown2) **Created:** 6/13/2026 **Status:** 🔄 Open **Base:** `master` ← **Head:** `refactor/client-import-meta-env` --- ### 📝 Commits (2) - [`e58d12d`](https://github.com/actualbudget/actual/commit/e58d12d114840706d43a803f364b9c57eae79a6a) [AI] refactor(desktop-client): use import.meta.env for REACT_APP_* in client-only code - [`3c5a0e0`](https://github.com/actualbudget/actual/commit/3c5a0e07a13847af907d9f85119c07f24e4ea021) [AI] refactor(build): remove process shim by migrating remaining browser process.env reads ### 📊 Changes **11 files changed** (+51 additions, -52 deletions) <details> <summary>View changed files</summary> 📝 `packages/desktop-client/src/browser-preload.js` (+4 -4) 📝 `packages/desktop-client/src/build-shims.js` (+0 -10) 📝 `packages/desktop-client/src/components/App.tsx` (+1 -1) 📝 `packages/desktop-client/src/components/DevelopmentTopBar.tsx` (+2 -2) 📝 `packages/desktop-client/src/components/FinancesApp.tsx` (+1 -1) 📝 `packages/desktop-client/src/hooks/useThemeCatalog.ts` (+1 -1) 📝 `packages/desktop-client/src/util/versions.ts` (+1 -1) 📝 `packages/desktop-client/vite.config.mts` (+4 -32) 📝 `packages/loot-core/package.json` (+10 -0) ➕ `packages/loot-core/src/shared/environment.browser.ts` (+21 -0) ➕ `upcoming-release-notes/8212.md` (+6 -0) </details> ### 📄 Description ## Description When working on #8167, I found that the process shim ended up causing issues, and thus https://github.com/actualbudget/actual/pull/8167/changes#diff-0e6fef7455523934cb77c75830efeab442577bc3a3a259d93924cfb1affd7e57R96 was born. Then I thought: Why is this even needed in the first place? So I asked Claude to switch all browser-side code from `process.env.REACT_APP_*` to Vite's native `import.meta.env.REACT_APP_*`, and remove the `process` shim from the build pipeline entirely. `process` does not exist in the browser, so these reads only worked via a build-time `process` shim and were sensitive to chunk placement: a module-level read in `useThemeCatalog.ts` could land in the eagerly-loaded entry chunk and throw `ReferenceError: process is not defined` at startup (white screen, every e2e test timing out). `import.meta.env` is the idiomatic Vite mechanism (the project already sets `envPrefix: 'REACT_APP_'`), is statically replaced at build time, and removes that landmine permanently. This is a follow-up cleanup to the build shim added in #8167 (see the [inline discussion](https://github.com/actualbudget/actual/pull/8167#discussion_r3408598671) there). <details><summary>Commits</summary> **Commit 1: migrate callsites in client-only component files** - `src/hooks/useThemeCatalog.ts` — `REACT_APP_BRANCH` (module-level; this was the startup detonator) - `src/components/App.tsx` — `REACT_APP_REVIEW_ID` - `src/components/DevelopmentTopBar.tsx` — `REACT_APP_REVIEW_ID` - `src/components/FinancesApp.tsx` — `REACT_APP_IS_PIKAPODS` - `src/util/versions.ts` — `REACT_APP_REVIEW_ID` **Commit 2: migrate the bootstrap and remove the shim machinery** - `src/browser-preload.js` — `NODE_ENV`, `REACT_APP_REVIEW_ID`, `PUBLIC_URL`, `REACT_APP_BACKEND_WORKER_HASH` all migrated to `import.meta.env` - `loot-core/src/shared/environment.browser.ts` (new) — browser variant of `environment.ts` using `import.meta.env.DEV` and `import.meta.env.REACT_APP_NETLIFY` - `loot-core/package.json` — conditional exports for `#shared/environment` and `./shared/environment`: Electron and API builds keep `environment.ts` (real Node `process.env`); browser builds route to `environment.browser.ts` - `vite.config.mts` — `process` and `_process` removed from both serve and build inject paths; the `define-build-process` plugin (the `process.env` → `_process.env` rename workaround) is gone; only the `global` shim remains - `src/build-shims.js` — `process` export removed; only `global` remains </details> No behavior change: unset variables resolve to `undefined` exactly as before (the surrounding `&&`/`||`/`??` guards are unaffected). ### AI Disclaimer Commit 1: AI generated (Claude Opus 4.8 via Claude Code). Commit 2: AI generated (Claude Sonnet 4.6 via Claude Code). ## Related issue(s) Relates to #8167 (build shim that this cleanup builds on) ## Testing - Typecheck and lint pass for all changed files. - Production browser bundle builds successfully with zero `process.env` occurrences in runtime JS (only in source maps). - The same change was exercised as part of the #8167 stack with the full e2e suite green before being split out onto its own branch. ## Checklist - [x] Release notes added (see link above) - [x] No obvious regressions in affected areas - [x] Self-review has been performed - I have read every line of this diff and can explain what each change does and why it is needed <!--- actual-bot-sections ---> <hr /> <!--- bundlestats-action-comment key:combined start ---> ### Bundle Stats Bundle | Files count | Total bundle size | % Changed ------ | ----------- | ----------------- | --------- desktop-client | 37 | 13.23 MB → 13.23 MB (-1.91 kB) | -0.01% loot-core | 1 | 4.86 MB → 4.86 MB (-57 B) | -0.00% api | 2 | 3.87 MB | 0% cli | 1 | 7.97 MB | 0% crdt | 1 | 11.12 kB | 0% <details> <summary>View detailed bundle stats</summary> #### desktop-client **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 37 | 13.23 MB → 13.23 MB (-1.91 kB) | -0.01% <details> <summary>Changeset</summary> File | Δ | Size ---- | - | ---- `home/runner/work/actual/actual/packages/loot-core/src/shared/environment.browser.ts` | 🆕 +441 B | 0 B → 441 B `src/reports/index.ts` | +0 B (0%) | 0 B → 0 B `src/transactions/index.ts` | +0 B (0%) | 0 B → 0 B `node_modules/i18next/dist/esm/i18next.js` | 📉 -45 B (-0.06%) | 73.07 kB → 73.03 kB `src/components/FinancesApp.tsx` | 📉 -39 B (-0.20%) | 18.99 kB → 18.95 kB `node_modules/@react-stately/virtualizer/dist/Virtualizer.mjs` | 📉 -20 B (-0.27%) | 7.18 kB → 7.17 kB `node_modules/@react-aria/virtualizer/dist/ScrollView.mjs` | 📉 -20 B (-0.39%) | 5.07 kB → 5.05 kB `home/runner/work/actual/actual/packages/loot-core/src/platform/client/connection/index.ts` | 📉 -20 B (-0.60%) | 3.24 kB → 3.22 kB `src/components/App.tsx` | 📉 -109 B (-1.29%) | 8.28 kB → 8.18 kB `src/browser-preload.js` | 📉 -84 B (-2.11%) | 3.89 kB → 3.81 kB `node_modules/@react-stately/virtualizer/dist/Point.mjs` | 📉 -20 B (-4.19%) | 477 B → 457 B `src/hooks/useThemeCatalog.ts` | 📉 -57 B (-5.17%) | 1.08 kB → 1.02 kB `src/util/versions.ts` | 📉 -47 B (-5.19%) | 906 B → 859 B `src/build-shims.js` | 📉 -231 B (-62.26%) | 371 B → 140 B `home/runner/work/actual/actual/packages/loot-core/src/shared/environment.ts` | 🔥 -478 B (-100%) | 478 B → 0 B `src/components/DevelopmentTopBar.tsx` | 🔥 -1.19 kB (-100%) | 1.19 kB → 0 B </details> <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** Asset | File Size | % Changed ----- | --------- | --------- static/js/index.js | 1.58 MB → 1.58 MB (-1.48 kB) | -0.09% static/js/extends.js | 473.99 kB → 473.66 kB (-343 B) | -0.07% static/js/TransactionList.js | 82.8 kB → 82.74 kB (-60 B) | -0.07% static/js/Value.js | 4.49 MB → 4.49 MB (-37 B) | -0.00% **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- static/js/BackgroundImage.js | 121.09 kB | 0% static/js/FormulaEditor.js | 814.39 kB | 0% static/js/ManageRules.js | 46.47 kB | 0% static/js/PayeeRuleCountLabel.js | 7.1 kB | 0% static/js/ReportRouter.js | 1.25 MB | 0% static/js/ScheduleEditForm.js | 146.51 kB | 0% static/js/SchedulesTable.js | 203.52 kB | 0% static/js/TransactionEdit.js | 90.63 kB | 0% static/js/_baseIsEqual.js | 76.76 kB | 0% static/js/ca.js | 185.63 kB | 0% static/js/client.js | 450.92 kB | 0% static/js/da.js | 100.19 kB | 0% static/js/de.js | 182.38 kB | 0% static/js/en-GB.js | 9.25 kB | 0% static/js/en.js | 202.14 kB | 0% static/js/es.js | 177.58 kB | 0% static/js/fr.js | 177.35 kB | 0% static/js/indexeddb-main-thread-worker-e59fee74.js | 13.46 kB | 0% static/js/it.js | 163.93 kB | 0% static/js/narrow.js | 364.55 kB | 0% static/js/nb-NO.js | 147.07 kB | 0% static/js/nl.js | 119.71 kB | 0% static/js/pt-BR.js | 187.34 kB | 0% static/js/resize-observer.js | 18.06 kB | 0% static/js/th.js | 173.33 kB | 0% static/js/theme.js | 31.01 kB | 0% static/js/toString.js | 638.95 kB | 0% static/js/uk.js | 216.7 kB | 0% static/js/useFormatList.js | 2.52 kB | 0% static/js/useTransactionBatchActions.js | 9.71 kB | 0% static/js/wide.js | 298.23 kB | 0% static/js/workbox-window.prod.es5.js | 7.33 kB | 0% static/js/zh-Hans.js | 116.44 kB | 0% </div> </details> --- #### loot-core **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 4.86 MB → 4.86 MB (-57 B) | -0.00% <details> <summary>Changeset</summary> File | Δ | Size ---- | - | ---- `home/runner/work/actual/actual/packages/loot-core/src/shared/environment.browser.ts` | 🆕 +309 B | 0 B → 309 B `home/runner/work/actual/actual/packages/loot-core/src/shared/environment.ts` | 🔥 -366 B (-100%) | 366 B → 0 B </details> <details> <summary>View detailed bundle breakdown</summary> <div> **Added** Asset | File Size | % Changed ----- | --------- | --------- kcab.worker.D0gAGooJ.js | 0 B → 4.86 MB (+4.86 MB) | - **Removed** Asset | File Size | % Changed ----- | --------- | --------- kcab.worker.DhLbg59B.js | 4.86 MB → 0 B (-4.86 MB) | -100% **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** No assets were unchanged </div> </details> --- #### api **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 2 | 3.87 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- index.js | 3.87 MB | 0% models.js | 0 B | 0% </div> </details> --- #### cli **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 7.97 MB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- cli.js | 7.97 MB | 0% </div> </details> --- #### crdt **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 11.12 kB | 0% <details> <summary>View detailed bundle breakdown</summary> <div> **Added** No assets were added **Removed** No assets were removed **Bigger** No assets were bigger **Smaller** No assets were smaller **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- index.js | 11.12 kB | 0% </div> </details> </details> <!--- bundlestats-action-comment key:combined end ---> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-06-14 06:37:40 -05:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#127075