Skip to content

fix(build): replace process.env.NODE_ENV in 1st-gen and 2nd-gen builds#6264

Closed
rubencarvalho wants to merge 2 commits into
mainfrom
rcarvalho/fix-process-env-esbuild-define
Closed

fix(build): replace process.env.NODE_ENV in 1st-gen and 2nd-gen builds#6264
rubencarvalho wants to merge 2 commits into
mainfrom
rcarvalho/fix-process-env-esbuild-define

Conversation

@rubencarvalho
Copy link
Copy Markdown
Contributor

@rubencarvalho rubencarvalho commented May 11, 2026

Description

Ensures built artifacts in both 1st-gen and 2nd-gen never contain raw process.env.NODE_ENV references, so downstream consumers (e.g. Sass playground) loading SWC packages in a browser without a bundler don't hit ReferenceError: process is not defined.

  • 1st-gen (ts-tools.js): adds an explicit define for process.env.NODE_ENV in the esbuild config. esbuild's build() API auto-replaces this by default, but making it explicit is defensive and self-documenting.
  • 2nd-gen (vite.config.js / vite.config.ts): adds a define to the Vite config. Vite's library mode (build.lib) does not auto-replace process.env.NODE_ENV, which is why the published 2nd-gen dist/element/spectrum-element.js was shipping with the raw expression — this is the actual customer-facing bug.

Motivation and context

PR #6250 fixes ReferenceError: process is not defined for downstream consumers by adding a typeof process !== 'undefined' runtime guard in Base.ts and spectrum-element.ts. That approach fixes the symptom but breaks 1st-gen CI tests: esbuild doesn't replace typeof process, so the guard evaluates to false in the browser test environment, window.__swc is never initialized, and window.__swc.warn() crashes in components like DialogBase.

Verification — built dist files no longer contain any process.X or typeof process references:

$ grep -rEn '\bprocess\.|typeof process\b' \
    1st-gen/packages/*/src/*.dev.js 1st-gen/packages/*/src/*.js \
    1st-gen/tools/*/src/*.dev.js 1st-gen/tools/*/src/*.js \
    2nd-gen/packages/core/dist 2nd-gen/packages/swc/dist
# (no matches)

In the rebuilt 2nd-gen spectrum-element.js, the entire dev-mode setup block is dead-code eliminated because "production" === 'development' is false.

Important: PR #6250 must also revert its typeof process !== 'undefined' source-level guards in Base.ts and spectrum-element.ts. With process.env.NODE_ENV replaced at build time in both build systems, the guards are unnecessary, and keeping them would still break 1st-gen tests (the built output becomes if (typeof process !== 'undefined' && true), still false in the browser).

Related issue(s)

Author's checklist

  • I have read the CONTRIBUTING and PULL_REQUESTS documents.
  • [n/a] I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
  • [n/a] I have added automated tests to cover my changes.
  • [n/a] I have included a well-written changeset if my change needs to be published.
  • [n/a] I have included updated documentation if my change required it.

Accessibility testing checklist

N/A — build configuration change only.

@rubencarvalho rubencarvalho requested a review from a team as a code owner May 11, 2026 12:20
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 11, 2026

⚠️ No Changeset found

Latest commit: 89e88be

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@rubencarvalho rubencarvalho marked this pull request as draft May 11, 2026 12:47
Adds process.env.NODE_ENV to the esbuild define config so built .js and
.dev.js files never contain raw process.env references. This fixes
ReferenceError: process is not defined for downstream consumers that load
SWC packages in a browser without a bundler (e.g. Sass playground), while
keeping dev/prod behaviour correct in built output.
@rubencarvalho rubencarvalho force-pushed the rcarvalho/fix-process-env-esbuild-define branch from 4d61596 to 41c4139 Compare May 11, 2026 12:54
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 11, 2026

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-6264

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

Vite's library mode does not auto-replace process.env.NODE_ENV, so 2nd-gen
dist files contained raw process.env.NODE_ENV references. This caused
ReferenceError: process is not defined for downstream consumers that load
SWC packages in a browser without a bundler (e.g. Sass playground).

Adds a mode-aware define so dist files contain the literal mode value
('production' or 'development') instead of the runtime expression.
@rubencarvalho rubencarvalho changed the title fix(build): replace process.env.NODE_ENV and typeof process at esbuild time fix(build): replace process.env.NODE_ENV in 1st-gen and 2nd-gen builds May 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Uncaught ReferenceError: process is not defined in Base.ts

2 participants