From 6cc62b1472cfc8ae7bdf0b60e18d6e3e222f0e28 Mon Sep 17 00:00:00 2001 From: Dmitrii Kamenskikh Date: Wed, 23 Apr 2025 10:34:17 +0100 Subject: [PATCH 1/4] fix(webpack): define each environment key separately --- packages/webpack/src/utils/get-client-environment.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/webpack/src/utils/get-client-environment.ts b/packages/webpack/src/utils/get-client-environment.ts index 50f012fc285..b8675d5b7bd 100644 --- a/packages/webpack/src/utils/get-client-environment.ts +++ b/packages/webpack/src/utils/get-client-environment.ts @@ -19,12 +19,10 @@ export function getClientEnvironment(mode?: string) { ); // Stringify all values so we can feed into webpack DefinePlugin - const stringified = { - 'process.env': Object.keys(raw).reduce((env, key) => { - env[key] = JSON.stringify(raw[key]); - return env; - }, {}), - }; + const stringified = Object.keys(raw).reduce((env, key) => { + env[`process.env.${key}`] = JSON.stringify(raw[key]); + return env; + }, {}); return { stringified }; } From f1aa24323ad8f2c1f9dd49b55fdffaf7a5c719d8 Mon Sep 17 00:00:00 2001 From: Dmitrii Kamenskikh Date: Wed, 23 Apr 2025 10:34:28 +0100 Subject: [PATCH 2/4] fix(storybook): define each environment key separately --- packages/react/plugins/storybook/index.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/react/plugins/storybook/index.ts b/packages/react/plugins/storybook/index.ts index 7023536aedb..d922778599f 100644 --- a/packages/react/plugins/storybook/index.ts +++ b/packages/react/plugins/storybook/index.ts @@ -51,12 +51,10 @@ function getClientEnvironment(mode) { ); // Stringify all values so we can feed into webpack DefinePlugin - const stringified = { - 'process.env': Object.keys(raw).reduce((env, key) => { - env[key] = JSON.stringify(raw[key]); - return env; - }, {}), - }; + const stringified = Object.keys(raw).reduce((env, key) => { + env[`process.env.${key}`] = JSON.stringify(raw[key]); + return env; + }, {}); return { stringified }; } From 936f99ad4e66fabfe71850d51eeee8c6aa909576 Mon Sep 17 00:00:00 2001 From: Dmitrii Kamenskikh Date: Wed, 23 Apr 2025 10:34:38 +0100 Subject: [PATCH 3/4] fix(rspack): define each environment key separately --- packages/rspack/src/plugins/utils/apply-web-config.ts | 10 ++++------ packages/rspack/src/utils/with-web.ts | 10 ++++------ 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/packages/rspack/src/plugins/utils/apply-web-config.ts b/packages/rspack/src/plugins/utils/apply-web-config.ts index 4d8cf1638dd..284fd62dcf1 100644 --- a/packages/rspack/src/plugins/utils/apply-web-config.ts +++ b/packages/rspack/src/plugins/utils/apply-web-config.ts @@ -421,12 +421,10 @@ function getClientEnvironment(mode?: string) { }, {}); // Stringify all values so we can feed into rspack DefinePlugin - const stringified = { - 'process.env': Object.keys(raw).reduce((env, key) => { - env[key] = JSON.stringify(raw[key]); - return env; - }, {}), - }; + const stringified = Object.keys(raw).reduce((env, key) => { + env[`process.env.${key}`] = JSON.stringify(raw[key]); + return env; + }, {}); return { stringified }; } diff --git a/packages/rspack/src/utils/with-web.ts b/packages/rspack/src/utils/with-web.ts index 3dee636fc7e..1129d6055da 100644 --- a/packages/rspack/src/utils/with-web.ts +++ b/packages/rspack/src/utils/with-web.ts @@ -78,12 +78,10 @@ function getClientEnvironment(mode?: string) { }, {}); // Stringify all values so we can feed into rspack DefinePlugin - const stringified = { - 'process.env': Object.keys(raw).reduce((env, key) => { - env[key] = JSON.stringify(raw[key]); - return env; - }, {}), - }; + const stringified = Object.keys(raw).reduce((env, key) => { + env[`process.env.${key}`] = JSON.stringify(raw[key]); + return env; + }, {}); return { stringified }; } From 662263178ca51f66ccd48164006c1b7d76d4013a Mon Sep 17 00:00:00 2001 From: Colum Ferry Date: Thu, 11 Dec 2025 13:23:47 +0000 Subject: [PATCH 4/4] fix(webpack): add process.env fallback for DefinePlugin 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 | 13 +++++++++---- .../rspack/src/plugins/utils/apply-web-config.ts | 13 +++++++++---- packages/rspack/src/utils/with-web.ts | 13 +++++++++---- .../webpack/src/utils/get-client-environment.ts | 13 +++++++++---- 4 files changed, 36 insertions(+), 16 deletions(-) diff --git a/packages/react/plugins/storybook/index.ts b/packages/react/plugins/storybook/index.ts index d922778599f..5943ce1d973 100644 --- a/packages/react/plugins/storybook/index.ts +++ b/packages/react/plugins/storybook/index.ts @@ -51,10 +51,15 @@ function getClientEnvironment(mode) { ); // Stringify all values so we can feed into webpack DefinePlugin - const stringified = Object.keys(raw).reduce((env, key) => { - env[`process.env.${key}`] = JSON.stringify(raw[key]); - return env; - }, {}); + const stringified = Object.keys(raw).reduce( + (env, key) => { + env[`process.env.${key}`] = JSON.stringify(raw[key]); + return env; + }, + // Provide a fallback for process.env itself to handle cases where code + // accesses process.env directly (e.g., in Cypress component testing) + { 'process.env': '{}' } as Record + ); return { stringified }; } diff --git a/packages/rspack/src/plugins/utils/apply-web-config.ts b/packages/rspack/src/plugins/utils/apply-web-config.ts index 284fd62dcf1..b949e209c5f 100644 --- a/packages/rspack/src/plugins/utils/apply-web-config.ts +++ b/packages/rspack/src/plugins/utils/apply-web-config.ts @@ -421,10 +421,15 @@ function getClientEnvironment(mode?: string) { }, {}); // Stringify all values so we can feed into rspack DefinePlugin - const stringified = Object.keys(raw).reduce((env, key) => { - env[`process.env.${key}`] = JSON.stringify(raw[key]); - return env; - }, {}); + const stringified = Object.keys(raw).reduce( + (env, key) => { + env[`process.env.${key}`] = JSON.stringify(raw[key]); + return env; + }, + // Provide a fallback for process.env itself to handle cases where code + // accesses process.env directly (e.g., in Cypress component testing) + { 'process.env': '{}' } as Record + ); return { stringified }; } diff --git a/packages/rspack/src/utils/with-web.ts b/packages/rspack/src/utils/with-web.ts index 1129d6055da..c0c71742f89 100644 --- a/packages/rspack/src/utils/with-web.ts +++ b/packages/rspack/src/utils/with-web.ts @@ -78,10 +78,15 @@ function getClientEnvironment(mode?: string) { }, {}); // Stringify all values so we can feed into rspack DefinePlugin - const stringified = Object.keys(raw).reduce((env, key) => { - env[`process.env.${key}`] = JSON.stringify(raw[key]); - return env; - }, {}); + const stringified = Object.keys(raw).reduce( + (env, key) => { + env[`process.env.${key}`] = JSON.stringify(raw[key]); + return env; + }, + // Provide a fallback for process.env itself to handle cases where code + // accesses process.env directly (e.g., in Cypress component testing) + { 'process.env': '{}' } as Record + ); return { stringified }; } diff --git a/packages/webpack/src/utils/get-client-environment.ts b/packages/webpack/src/utils/get-client-environment.ts index b8675d5b7bd..3011c2393fd 100644 --- a/packages/webpack/src/utils/get-client-environment.ts +++ b/packages/webpack/src/utils/get-client-environment.ts @@ -19,10 +19,15 @@ export function getClientEnvironment(mode?: string) { ); // Stringify all values so we can feed into webpack DefinePlugin - const stringified = Object.keys(raw).reduce((env, key) => { - env[`process.env.${key}`] = JSON.stringify(raw[key]); - return env; - }, {}); + const stringified = Object.keys(raw).reduce( + (env, key) => { + env[`process.env.${key}`] = JSON.stringify(raw[key]); + return env; + }, + // Provide a fallback for process.env itself to handle cases where code + // accesses process.env directly (e.g., in Cypress component testing) + { 'process.env': '{}' } as Record + ); return { stringified }; }