Merge pull request #15925 from vdh/fix-define-plugin

Core: Replaced `process.env` override in `DefinePlugin` config
storybookjs · Sep 7, 2021 · 06450c4 · 06450c4
2 parents 8a56e94 + 17cbc66
commit 06450c4
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 &&