filter env vars from .env files

allow direct process.env call in webpack, matching manager+vite implementations

Author: JReinhold

code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -194,6 +194,7 @@ export default async (
         },
       }),
       new DefinePlugin({
+        'process.env': JSON.stringify(envs),
         ...stringifyProcessEnvs(envs),
         NODE_ENV: JSON.stringify(
           features?.developmentModeForBuild && isProd ? 'development' : process.env.NODE_ENV

code/core/src/common/utils/envs.ts

@@ -12,7 +12,7 @@ export function loadEnvs(options: { production?: boolean } = {}): {
 } {
   const defaultNodeEnv = options.production ? 'production' : 'development';
 
-  const env: Record<string, string | undefined> = {
+  const baseEnv: Record<string, string> = {
     // eslint-disable-next-line @typescript-eslint/dot-notation
     NODE_ENV: process.env['NODE_ENV'] || defaultNodeEnv,
     NODE_PATH: process.env['NODE_PATH'] || '',
@@ -24,27 +24,23 @@ export function loadEnvs(options: { production?: boolean } = {}): {
     PUBLIC_URL: options.production ? '.' : '',
   };
 
-  Object.keys(process.env)
-    .filter((name) => /^STORYBOOK_/.test(name))
-    .forEach((name) => {
-      env[name] = process.env[name];
-    });
+  const dotenv = getEnvironment({ nodeEnv: baseEnv['NODE_ENV'] });
 
-  const base = Object.entries(env).reduce(
-    (acc, [k, v]) => Object.assign(acc, { [k]: JSON.stringify(v) }),
-    {} as Record<string, string>
+  const envEntries = Object.fromEntries<string>(
+    Object.entries<string>({
+      // TODO: it seems wrong that dotenv overrides process.env, but that's how it has always worked
+      ...process.env,
+      ...dotenv.raw,
+    }).filter(([name]) => /^STORYBOOK_/.test(name))
   );
 
-  const { stringified, raw } = getEnvironment({ nodeEnv: env['NODE_ENV'] });
+  const raw: Record<string, string> = { ...baseEnv, ...envEntries };
+  (raw as any).NODE_PATH = nodePathsToArray((raw.NODE_PATH as string) || '');
 
-  const fullRaw = { ...env, ...raw };
-
-  fullRaw.NODE_PATH = nodePathsToArray(fullRaw.NODE_PATH || '');
-
-  return {
-    stringified: { ...base, ...stringified },
-    raw: fullRaw,
-  };
+  const stringified = Object.fromEntries(
+    Object.entries(raw).map(([key, value]) => [key, JSON.stringify(value)])
+  );
+  return { raw, stringified };
 }
 
 export const stringifyEnvs = (raw: Record<string, string>): Record<string, string> =>
@@ -58,12 +54,5 @@ export const stringifyProcessEnvs = (raw: Record<string, string>): Record<string
     acc[`process.env.${key}`] = JSON.stringify(value);
     return acc;
   }, {});
-  // FIXME: something like this is necessary to support destructuring like:
-  //
-  // const { foo } = process.env;
-  //
-  // However, it also means that process.env.foo = 'bar' will fail, so removing this:
-  //
-  // envs['process.env'] = JSON.stringify(raw);
   return envs;
 };