github-starred/actual
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-07-13 21:53:32 -05:00
Code Issues 3.0k Packages Projects Releases 58 Wiki Activity

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

New Issue
Open
opened 2026-06-17 21:14:21 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-06-17 21:14:21 -05:00
Owner
Copy Link

📋 Pull Request Information

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

Base: master ← Head: refactor/client-import-meta-env

📝 Commits (3)

  • 12cccf9 [AI] refactor(desktop-client): use import.meta.env for REACT_APP_* in client-only code
  • d504f98 [AI] refactor(build): remove process shim by migrating remaining browser process.env reads
  • 17f884e Rename 8212.md to process-env.md

📊 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/process-env.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.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

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

  • 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 29 13.1 MB → 13.1 MB (-1.85 kB) -0.01%
loot-core 1 4.9 MB → 4.9 MB (-57 B) -0.00%
api 2 3.93 MB 0%
cli 1 8.02 MB 0%
crdt 1 11.12 kB 0%
View detailed bundle stats

desktop-client

Total

Files count Total bundle size % Changed
29 13.1 MB → 13.1 MB (-1.85 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/components/FinancesApp.tsx 📉 -41 B (-0.21%) 19 kB → 18.96 kB
node_modules/react-stately/dist/private/virtualizer/Virtualizer.mjs 📉 -20 B (-0.26%) 7.46 kB → 7.45 kB
node_modules/react-aria/dist/private/virtualizer/ScrollView.mjs 📉 -20 B (-0.27%) 7.33 kB → 7.31 kB
src/components/App.tsx 📉 -111 B (-1.31%) 8.29 kB → 8.18 kB
src/browser-preload.js 📉 -90 B (-2.25%) 3.9 kB → 3.81 kB
node_modules/react-stately/dist/private/virtualizer/Point.mjs 📉 -20 B (-4.13%) 484 B → 464 B
src/util/versions.ts 📉 -45 B (-4.98%) 904 B → 859 B
src/hooks/useThemeCatalog.ts 📉 -59 B (-5.34%) 1.08 kB → 1.02 kB
src/build-shims.js 📉 -227 B (-61.85%) 367 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.2 kB (-100%) 1.2 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 7.61 MB → 7.61 MB (-1.53 kB) -0.02%
static/js/extends.js 478.5 kB → 478.23 kB (-272 B) -0.06%
static/js/TransactionList.js 85.25 kB → 85.19 kB (-60 B) -0.07%

Unchanged

Asset File Size % Changed
static/js/BackgroundImage.js 121.09 kB 0%
static/js/FormulaEditor.js 735.67 kB 0%
static/js/PayeeRuleCountLabel.js 7.1 kB 0%
static/js/ReportRouter.js 1.25 MB 0%
static/js/_baseIsEqual.js 76.78 kB 0%
static/js/ca.js 179.71 kB 0%
static/js/da.js 100.19 kB 0%
static/js/de.js 176.61 kB 0%
static/js/en-GB.js 9.25 kB 0%
static/js/en.js 200.33 kB 0%
static/js/es.js 171.82 kB 0%
static/js/fr.js 171.39 kB 0%
static/js/indexeddb-main-thread-worker-e59fee74.js 13.46 kB 0%
static/js/it.js 158.13 kB 0%
static/js/narrow.js 358.88 kB 0%
static/js/nb-NO.js 141.55 kB 0%
static/js/nl.js 119.14 kB 0%
static/js/pt-BR.js 181.5 kB 0%
static/js/resize-observer.js 18.06 kB 0%
static/js/th.js 173.33 kB 0%
static/js/theme.js 31.02 kB 0%
static/js/uk.js 209.97 kB 0%
static/js/useTransactionBatchActions.js 9.71 kB 0%
static/js/wide.js 298.21 kB 0%
static/js/workbox-window.prod.es5.js 7.21 kB 0%
static/js/zh-Hans.js 113.26 kB 0%

loot-core

Total

Files count Total bundle size % Changed
1 4.9 MB → 4.9 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.4Uimg8b6.js 0 B → 4.9 MB (+4.9 MB) -

Removed

Asset File Size % Changed
kcab.worker.VDgbgKoY.js 4.9 MB → 0 B (-4.9 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.93 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.93 MB 0%
models.js 0 B 0%

cli

Total

Files count Total bundle size % Changed
1 8.02 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 8.02 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 (3) - [`12cccf9`](https://github.com/actualbudget/actual/commit/12cccf93b3ea83aef848d56e273498363de4eca5) [AI] refactor(desktop-client): use import.meta.env for REACT_APP_* in client-only code - [`d504f98`](https://github.com/actualbudget/actual/commit/d504f983fb4a4b7c6e75281768fd2ad670dcda4d) [AI] refactor(build): remove process shim by migrating remaining browser process.env reads - [`17f884e`](https://github.com/actualbudget/actual/commit/17f884e485d0f11046adce61e5732c6fc15451b8) Rename 8212.md to process-env.md ### 📊 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/process-env.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 | 29 | 13.1 MB → 13.1 MB (-1.85 kB) | -0.01% loot-core | 1 | 4.9 MB → 4.9 MB (-57 B) | -0.00% api | 2 | 3.93 MB | 0% cli | 1 | 8.02 MB | 0% crdt | 1 | 11.12 kB | 0% <details> <summary>View detailed bundle stats</summary> #### desktop-client **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 29 | 13.1 MB → 13.1 MB (-1.85 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/components/FinancesApp.tsx` | 📉 -41 B (-0.21%) | 19 kB → 18.96 kB `node_modules/react-stately/dist/private/virtualizer/Virtualizer.mjs` | 📉 -20 B (-0.26%) | 7.46 kB → 7.45 kB `node_modules/react-aria/dist/private/virtualizer/ScrollView.mjs` | 📉 -20 B (-0.27%) | 7.33 kB → 7.31 kB `src/components/App.tsx` | 📉 -111 B (-1.31%) | 8.29 kB → 8.18 kB `src/browser-preload.js` | 📉 -90 B (-2.25%) | 3.9 kB → 3.81 kB `node_modules/react-stately/dist/private/virtualizer/Point.mjs` | 📉 -20 B (-4.13%) | 484 B → 464 B `src/util/versions.ts` | 📉 -45 B (-4.98%) | 904 B → 859 B `src/hooks/useThemeCatalog.ts` | 📉 -59 B (-5.34%) | 1.08 kB → 1.02 kB `src/build-shims.js` | 📉 -227 B (-61.85%) | 367 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.2 kB (-100%) | 1.2 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 | 7.61 MB → 7.61 MB (-1.53 kB) | -0.02% static/js/extends.js | 478.5 kB → 478.23 kB (-272 B) | -0.06% static/js/TransactionList.js | 85.25 kB → 85.19 kB (-60 B) | -0.07% **Unchanged** Asset | File Size | % Changed ----- | --------- | --------- static/js/BackgroundImage.js | 121.09 kB | 0% static/js/FormulaEditor.js | 735.67 kB | 0% static/js/PayeeRuleCountLabel.js | 7.1 kB | 0% static/js/ReportRouter.js | 1.25 MB | 0% static/js/_baseIsEqual.js | 76.78 kB | 0% static/js/ca.js | 179.71 kB | 0% static/js/da.js | 100.19 kB | 0% static/js/de.js | 176.61 kB | 0% static/js/en-GB.js | 9.25 kB | 0% static/js/en.js | 200.33 kB | 0% static/js/es.js | 171.82 kB | 0% static/js/fr.js | 171.39 kB | 0% static/js/indexeddb-main-thread-worker-e59fee74.js | 13.46 kB | 0% static/js/it.js | 158.13 kB | 0% static/js/narrow.js | 358.88 kB | 0% static/js/nb-NO.js | 141.55 kB | 0% static/js/nl.js | 119.14 kB | 0% static/js/pt-BR.js | 181.5 kB | 0% static/js/resize-observer.js | 18.06 kB | 0% static/js/th.js | 173.33 kB | 0% static/js/theme.js | 31.02 kB | 0% static/js/uk.js | 209.97 kB | 0% static/js/useTransactionBatchActions.js | 9.71 kB | 0% static/js/wide.js | 298.21 kB | 0% static/js/workbox-window.prod.es5.js | 7.21 kB | 0% static/js/zh-Hans.js | 113.26 kB | 0% </div> </details> --- #### loot-core **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 4.9 MB → 4.9 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.4Uimg8b6.js | 0 B → 4.9 MB (+4.9 MB) | - **Removed** Asset | File Size | % Changed ----- | --------- | --------- kcab.worker.VDgbgKoY.js | 4.9 MB → 0 B (-4.9 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.93 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.93 MB | 0% models.js | 0 B | 0% </div> </details> --- #### cli **Total** Files count | Total bundle size | % Changed ----------- | ----------------- | --------- 1 | 8.02 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 | 8.02 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-17 21:14:21 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
AI generated
API
bank sync
budgeting
bug
can’t replicate
dependencies
docker
documentation
electron
experimental feature
feature
feedback
goal templates
good first issue
help wanted
importers
maintenance
needs info
needs testing
needs triage
needs votes
openid
payees
pull-request
Mirrored from GitHub Pull Request
 regression
reports
responsive
rules
schedules
server
✨ merged
split transactions
tech debt
tech-support
theme
transaction import
transaction reconciliation
transactions
translations
upstream
user interface
✅ approved
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#136451
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?