fix(webpack): interpolate process.env more verbosely to reduce bundle size with DefinePlugin by coolassassin · Pull Request #30826 · nrwl/nx

coolassassin · 2025-04-23T09:55:50Z

Current Behavior

When we prepare ENVs for the DefinePlugin, we are creating the process.env object.
For example:

// .env
NX_PUBLIC_VALUE1=1
NX_PUBLIC_VALUE2=2
NX_PUBLIC_VALUE3=3

As result we will have:

{
   'process.env': {
      "NX_PUBLIC_VALUE1": "1",
      "NX_PUBLIC_VALUE2": "2",
      "NX_PUBLIC_VALUE3": "3"
   }
}

As a result, in the final bundle, we will replace process.env with this object.
The issue:
If I use all 3 values in my application DefinePlugin will inject this object 3 times, instead of injecting it once.
It will look like that:

const a = {
      "NX_PUBLIC_VALUE1": "1",
      "NX_PUBLIC_VALUE2": "2",
      "NX_PUBLIC_VALUE3": "3"
}.NX_PUBLIC_VALUE1
const b = {
      "NX_PUBLIC_VALUE1": "1",
      "NX_PUBLIC_VALUE2": "2",
      "NX_PUBLIC_VALUE3": "3"
}.NX_PUBLIC_VALUE2
const c = {
      "NX_PUBLIC_VALUE1": "1",
      "NX_PUBLIC_VALUE2": "2",
      "NX_PUBLIC_VALUE3": "3"
}.NX_PUBLIC_VALUE3

Expected Behavior

DefinePlugin injects values instead of env object in each place

const a = "1"
const b = "2"
const c = "3"

Fixes

fixed this issue for webpack
fixed this issue for storybook
fixed this issue for rspack

TLDR:
now we have object like so:

{
    "process.env.NX_PUBLIC_VALUE1": "1",
    "process.env.NX_PUBLIC_VALUE2": "2",
    "process.env.NX_PUBLIC_VALUE3": "3"
}

vercel · 2025-04-23T09:55:54Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
nx-dev	Ready	Preview	Dec 11, 2025 3:50pm

nx-cloud · 2025-04-25T09:05:27Z

View your CI Pipeline Execution ↗ for commit 6622631

Command	Status	Duration	Result
`nx affected --targets=lint,test,test-kt,build,e...`	✅ Succeeded	5m 39s	View ↗
`nx run-many -t check-imports check-lock-files c...`	✅ Succeeded	2m 29s	View ↗
`nx-cloud record -- nx-cloud conformance:check`	✅ Succeeded	11s	View ↗
`nx-cloud record -- nx format:check`	✅ Succeeded	2s	View ↗
`nx-cloud record -- nx sync:check`	✅ Succeeded	<1s	View ↗

☁️ Nx Cloud last updated this comment at 2025-12-11 18:42:11 UTC

coolassassin · 2025-04-30T09:50:44Z

@Coly010 could you help me. Should I try to fix this failed test, or it is just something flaky?

coolassassin · 2025-07-07T13:04:48Z

@Coly010 I can't reproduce this bug in the job on my MacOS laptop:

coolassassin · 2025-09-16T09:52:08Z

@claude can you take a look at a test? I can't reproduce it on my macOS machine

netlify · 2025-12-11T10:05:52Z

👷 Deploy request for nx-docs pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	`6622631`

The change to define environment variables individually (e.g., 'process.env.KEY') broke environments where the process global doesn't exist, such as Cypress component testing. This adds a fallback 'process.env': '{}' to handle cases where code accesses process.env directly while maintaining the bundle size optimization from individual key definitions.

packages/react/plugins/storybook/index.ts

nx-cloud

Important

A new CI pipeline execution was requested that may update the conclusion below...

Nx Cloud is proposing a fix for your failed CI:

These changes fix the webpack dev server timeout by ensuring process.env property access occurs on a single line. The PR's DefinePlugin format change (defining individual keys instead of a process.env object) broke multi-line property access patterns, causing DefinePlugin to replace process.env with "{}" and then attempt property access on a string. By consolidating the property access to single lines in the runtime plugin and utility files, webpack can now correctly match and replace the full expression.

We could not verify this fix.

Suggested Fix changes

diff --git a/packages/module-federation/src/utils/plugins/runtime-library-control.plugin.ts b/packages/module-federation/src/utils/plugins/runtime-library-control.plugin.ts
index 2f34a68603..6910394ee4 100644
--- a/packages/module-federation/src/utils/plugins/runtime-library-control.plugin.ts
+++ b/packages/module-federation/src/utils/plugins/runtime-library-control.plugin.ts
@@ -10,8 +10,9 @@ const runtimeStore: {
 
 if (process.env.NX_MF_DEV_REMOTES) {
   // process.env.NX_MF_DEV_REMOTES is replaced by an array value via DefinePlugin, even though the original value is a stringified array.
-  runtimeStore.devRemotes = process.env
-    .NX_MF_DEV_REMOTES as unknown as string[];
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore - Must be on single line for DefinePlugin to replace correctly
+  runtimeStore.devRemotes = process.env.NX_MF_DEV_REMOTES as unknown as string[];
 }
 
 const nxRuntimeLibraryControlPlugin: () => ModuleFederationRuntimePlugin =
diff --git a/packages/module-federation/src/with-module-federation/angular/utils.ts b/packages/module-federation/src/with-module-federation/angular/utils.ts
index 34c8b84695..ad17918414 100644
--- a/packages/module-federation/src/with-module-federation/angular/utils.ts
+++ b/packages/module-federation/src/with-module-federation/angular/utils.ts
@@ -71,8 +71,9 @@ export function getFunctionDeterminateRemoteUrl(
     : 'remoteEntry.mjs';
 
   return function (remote: string) {
-    const mappedStaticRemotesFromEnv = process.env
-      .NX_MF_DEV_SERVER_STATIC_REMOTES
+    // Must access process.env.NX_MF_DEV_SERVER_STATIC_REMOTES on single line for DefinePlugin to replace correctly
+    // prettier-ignore
+    const mappedStaticRemotesFromEnv = process.env.NX_MF_DEV_SERVER_STATIC_REMOTES
       ? JSON.parse(process.env.NX_MF_DEV_SERVER_STATIC_REMOTES)
       : undefined;
     if (mappedStaticRemotesFromEnv && mappedStaticRemotesFromEnv[remote]) {
diff --git a/packages/module-federation/src/with-module-federation/rspack/utils.ts b/packages/module-federation/src/with-module-federation/rspack/utils.ts
index b9a141eaf4..bf9752f048 100644
--- a/packages/module-federation/src/with-module-federation/rspack/utils.ts
+++ b/packages/module-federation/src/with-module-federation/rspack/utils.ts
@@ -22,8 +22,9 @@ export function getFunctionDeterminateRemoteUrl(isServer = false) {
   const remoteEntry = isServer ? 'server/remoteEntry.js' : 'remoteEntry.js';
 
   return function (remote: string) {
-    const mappedStaticRemotesFromEnv = process.env
-      .NX_MF_DEV_SERVER_STATIC_REMOTES
+    // Must access process.env.NX_MF_DEV_SERVER_STATIC_REMOTES on single line for DefinePlugin to replace correctly
+    // prettier-ignore
+    const mappedStaticRemotesFromEnv = process.env.NX_MF_DEV_SERVER_STATIC_REMOTES
       ? JSON.parse(process.env.NX_MF_DEV_SERVER_STATIC_REMOTES)
       : undefined;
     if (mappedStaticRemotesFromEnv && mappedStaticRemotesFromEnv[remote]) {
diff --git a/packages/module-federation/src/with-module-federation/webpack/utils.ts b/packages/module-federation/src/with-module-federation/webpack/utils.ts
index ae53ab1dfe..029ee8bf37 100644
--- a/packages/module-federation/src/with-module-federation/webpack/utils.ts
+++ b/packages/module-federation/src/with-module-federation/webpack/utils.ts
@@ -23,8 +23,9 @@ export function getFunctionDeterminateRemoteUrl(isServer: boolean = false) {
   const remoteEntry = isServer ? 'server/remoteEntry.js' : 'remoteEntry.js';
 
   return function (remote: string) {
-    const mappedStaticRemotesFromEnv = process.env
-      .NX_MF_DEV_SERVER_STATIC_REMOTES
+    // Must access process.env.NX_MF_DEV_SERVER_STATIC_REMOTES on single line for DefinePlugin to replace correctly
+    // prettier-ignore
+    const mappedStaticRemotesFromEnv = process.env.NX_MF_DEV_SERVER_STATIC_REMOTES
       ? JSON.parse(process.env.NX_MF_DEV_SERVER_STATIC_REMOTES)
       : undefined;
     if (mappedStaticRemotesFromEnv && mappedStaticRemotesFromEnv[remote]) {

Because this branch comes from a fork, it is not possible for us to apply fixes directly, but you can apply the changes locally using the available options below.

Apply changes locally with:

npx nx-cloud apply-locally QJYE-FuvS

Apply fix locally with your editor ↗ View interactive diff ↗

_{🎓 Learn more about Self-Healing CI on nx.dev}

… size with DefinePlugin (#30826) ## Current Behavior When we prepare ENVs for the DefinePlugin, we are creating the `process.env` object. For example: ``` // .env NX_PUBLIC_VALUE1=1 NX_PUBLIC_VALUE2=2 NX_PUBLIC_VALUE3=3 ``` As result we will have: ```js { 'process.env': { "NX_PUBLIC_VALUE1": "1", "NX_PUBLIC_VALUE2": "2", "NX_PUBLIC_VALUE3": "3" } } ``` As a result, in the final bundle, we will replace process.env with this object. The issue: If I use all 3 values in my application DefinePlugin will inject this object 3 times, instead of injecting it once. It will look like that: ```js const a = { "NX_PUBLIC_VALUE1": "1", "NX_PUBLIC_VALUE2": "2", "NX_PUBLIC_VALUE3": "3" }.NX_PUBLIC_VALUE1 const b = { "NX_PUBLIC_VALUE1": "1", "NX_PUBLIC_VALUE2": "2", "NX_PUBLIC_VALUE3": "3" }.NX_PUBLIC_VALUE2 const c = { "NX_PUBLIC_VALUE1": "1", "NX_PUBLIC_VALUE2": "2", "NX_PUBLIC_VALUE3": "3" }.NX_PUBLIC_VALUE3 ``` ## Expected Behavior DefinePlugin injects values instead of env object in each place ```js const a = "1" const b = "2" const c = "3" ``` ## Fixes - fixed this issue for webpack - fixed this issue for storybook - fixed this issue for rspack TLDR: now we have object like so: ```js { "process.env.NX_PUBLIC_VALUE1": "1", "process.env.NX_PUBLIC_VALUE2": "2", "process.env.NX_PUBLIC_VALUE3": "3" } ``` --------- Co-authored-by: Colum Ferry <[email protected]>

github-actions · 2025-12-17T00:10:42Z

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.

coolassassin requested review from a team as code owners April 23, 2025 09:55

coolassassin requested a review from ndcunningham April 23, 2025 09:55

Coly010 approved these changes Apr 25, 2025

View reviewed changes

Coly010 changed the title ~~Define plugin fix~~ fix(webpack): interpolate process.env more verbosely to reduce bundle size with DefinePlugin Apr 25, 2025

Coly010 force-pushed the define-plugin-fix branch from b6eabb8 to 903c22a Compare April 25, 2025 09:04

FrozenPandaz assigned Coly010 Apr 25, 2025

vercel bot deployed to Preview May 9, 2025 13:00 View deployment

FrozenPandaz added the priority: high High Priority (important issues which affect many people severely) label May 9, 2025

Coly010 force-pushed the define-plugin-fix branch from cdc625e to 26aab59 Compare June 9, 2025 09:56

vercel bot deployed to Preview June 9, 2025 10:23 View deployment

vercel bot deployed to Preview July 7, 2025 08:32 View deployment

vercel bot deployed to Preview August 7, 2025 12:13 View deployment

Coly010 force-pushed the define-plugin-fix branch from 73bf313 to d4fc5bd Compare December 11, 2025 10:05

vercel bot deployed to Preview December 11, 2025 10:11 View deployment

coolassassin added 3 commits December 11, 2025 10:21

fix(webpack): define each environment key separately

6cc62b1

fix(storybook): define each environment key separately

f1aa243

fix(rspack): define each environment key separately

936f99a

Coly010 force-pushed the define-plugin-fix branch from d4fc5bd to 936f99a Compare December 11, 2025 10:21

vercel bot deployed to Preview December 11, 2025 10:26 View deployment

This comment was marked as outdated.

Sign in to view

vercel bot deployed to Preview December 11, 2025 13:46 View deployment

coolassassin commented Dec 11, 2025

View reviewed changes

packages/react/plugins/storybook/index.ts Show resolved Hide resolved

vercel bot deployed to Preview December 11, 2025 15:50 View deployment

This comment was marked as outdated.

Sign in to view

Coly010 force-pushed the define-plugin-fix branch from 29e4d6b to 6622631 Compare December 11, 2025 16:43

Coly010 enabled auto-merge (squash) December 11, 2025 17:02

nx-cloud bot reviewed Dec 11, 2025

View reviewed changes

Coly010 merged commit 205daee into nrwl:master Dec 11, 2025
25 of 27 checks passed

github-actions bot locked as resolved and limited conversation to collaborators Dec 17, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(webpack): interpolate process.env more verbosely to reduce bundle size with DefinePlugin#30826

fix(webpack): interpolate process.env more verbosely to reduce bundle size with DefinePlugin#30826
Coly010 merged 4 commits intonrwl:masterfrom
coolassassin:define-plugin-fix

coolassassin commented Apr 23, 2025 •

edited

Loading

Uh oh!

vercel bot commented Apr 23, 2025 •

edited

Loading

Uh oh!

nx-cloud bot commented Apr 25, 2025 •

edited

Loading

Uh oh!

coolassassin commented Apr 30, 2025

Uh oh!

coolassassin commented Jul 7, 2025

Uh oh!

coolassassin commented Sep 16, 2025

Uh oh!

netlify bot commented Dec 11, 2025 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

nx-cloud bot left a comment •

edited

Loading

Uh oh!

Uh oh!

github-actions bot commented Dec 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

coolassassin commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current Behavior

Expected Behavior

Fixes

Uh oh!

vercel bot commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nx-cloud bot commented Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coolassassin commented Apr 30, 2025

Uh oh!

coolassassin commented Jul 7, 2025

Uh oh!

coolassassin commented Sep 16, 2025

Uh oh!

netlify bot commented Dec 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👷 Deploy request for nx-docs pending review.

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

nx-cloud bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Nx Cloud is proposing a fix for your failed CI:

Uh oh!

Uh oh!

github-actions bot commented Dec 17, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

coolassassin commented Apr 23, 2025 •

edited

Loading

vercel bot commented Apr 23, 2025 •

edited

Loading

nx-cloud bot commented Apr 25, 2025 •

edited

Loading

netlify bot commented Dec 11, 2025 •

edited

Loading

nx-cloud bot left a comment •

edited

Loading