diff --git a/examples/vue-kitchen-sink/webpack.config.js b/examples/vue-kitchen-sink/webpack.config.js
index cf390b2b71f..a41c653eeae 100644
--- a/examples/vue-kitchen-sink/webpack.config.js
+++ b/examples/vue-kitchen-sink/webpack.config.js
@@ -85,9 +85,7 @@ if (process.env.NODE_ENV === 'production') {
   // http://vue-loader.vuejs.org/en/workflow/production.html
   module.exports.plugins = (module.exports.plugins || []).concat([
     new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: '"production"',
-      },
+      'process.env.NODE_ENV': '"production"',
     }),
     new webpack.optimize.UglifyJsPlugin({
       sourceMap: true,
diff --git a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts
index d34bda09452..85f984276ec 100644
--- a/lib/builder-webpack4/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack4/src/preview/iframe-webpack.config.ts
@@ -18,7 +18,7 @@ import themingPaths from '@storybook/theming/paths';
 
 import {
   toRequireContextString,
-  stringifyEnvs,
+  stringifyProcessEnvs,
   es6Transpiler,
   interpolate,
   nodeModulesPaths,
@@ -178,7 +178,7 @@ export default async ({
         template,
       }),
       new DefinePlugin({
-        'process.env': stringifyEnvs(envs),
+        ...stringifyProcessEnvs(envs),
         NODE_ENV: JSON.stringify(envs.NODE_ENV),
       }),
       isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths),
diff --git a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
index 6a2b7618352..8c7cc722b2a 100644
--- a/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/lib/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -14,7 +14,7 @@ import themingPaths from '@storybook/theming/paths';
 import {
   toRequireContextString,
   es6Transpiler,
-  stringifyEnvs,
+  stringifyProcessEnvs,
   nodeModulesPaths,
   interpolate,
   Options,
@@ -178,7 +178,7 @@ export default async ({
         template,
       }),
       new DefinePlugin({
-        'process.env': stringifyEnvs(envs),
+        ...stringifyProcessEnvs(envs),
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),
       }),
       isProd ? null : new WatchMissingNodeModulesPlugin(nodeModulesPaths),
diff --git a/lib/core-common/src/utils/envs.ts b/lib/core-common/src/utils/envs.ts
index 9b12de4d8a4..0a7ab8a4520 100644
--- a/lib/core-common/src/utils/envs.ts
+++ b/lib/core-common/src/utils/envs.ts
@@ -42,8 +42,21 @@ export function loadEnvs(
   };
 }
 
+/** @deprecated use `stringifyProcessEnvs` */
 export const stringifyEnvs = (raw: Record<string, string>): Record<string, string> =>
   Object.entries(raw).reduce<Record<string, string>>((acc, [key, value]) => {
     acc[key] = JSON.stringify(value);
     return acc;
   }, {});
+
+export const stringifyProcessEnvs = (raw: Record<string, string>): Record<string, string> =>
+  Object.entries(raw).reduce<Record<string, string>>(
+    (acc, [key, value]) => {
+      acc[`process.env.${key}`] = JSON.stringify(value);
+      return acc;
+    },
+    {
+      // Default fallback
+      'process.env.XSTORYBOOK_EXAMPLE_APP': '""',
+    }
+  );
diff --git a/lib/manager-webpack4/src/presets/manager-preset.ts b/lib/manager-webpack4/src/presets/manager-preset.ts
index 5da0e64a9a3..4a71338cea0 100644
--- a/lib/manager-webpack4/src/presets/manager-preset.ts
+++ b/lib/manager-webpack4/src/presets/manager-preset.ts
@@ -15,7 +15,7 @@ import readPackage from 'read-pkg-up';
 import {
   loadManagerOrAddonsFile,
   resolvePathInStorybookCache,
-  stringifyEnvs,
+  stringifyProcessEnvs,
   es6Transpiler,
   getManagerHeadTemplate,
   getManagerMainTemplate,
@@ -113,7 +113,7 @@ export async function managerWebpack(
       (new Dotenv({ silent: true }) as any) as WebpackPluginInstance,
       // graphql sources check process variable
       new DefinePlugin({
-        'process.env': stringifyEnvs(envs),
+        ...stringifyProcessEnvs(envs),
         NODE_ENV: JSON.stringify(envs.NODE_ENV),
       }) as WebpackPluginInstance,
       // isProd &&
diff --git a/lib/manager-webpack5/src/presets/manager-preset.ts b/lib/manager-webpack5/src/presets/manager-preset.ts
index a4e6dafa40e..4e8857895e2 100644
--- a/lib/manager-webpack5/src/presets/manager-preset.ts
+++ b/lib/manager-webpack5/src/presets/manager-preset.ts
@@ -14,7 +14,7 @@ import readPackage from 'read-pkg-up';
 import {
   loadManagerOrAddonsFile,
   resolvePathInStorybookCache,
-  stringifyEnvs,
+  stringifyProcessEnvs,
   es6Transpiler,
   getManagerHeadTemplate,
   getManagerMainTemplate,
@@ -113,7 +113,7 @@ export async function managerWebpack(
       hasDotenv() ? new Dotenv({ silent: true }) : null,
       // graphql sources check process variable
       new DefinePlugin({
-        'process.env': stringifyEnvs(envs),
+        ...stringifyProcessEnvs(envs),
         NODE_ENV: JSON.stringify(envs.NODE_ENV),
       }) as WebpackPluginInstance,
       // isProd &&