solve process.env usage in Storybook MJS modules

Author: bashmish

package-lock.json

@@ -49,6 +49,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^3.0.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-replace": "^6.0.2",
     "@rollup/pluginutils": "^5.0.2",
     "@storybook/core-common": "^8.5.0",
     "@storybook/node-logger": "^8.5.0",

packages/storybook-builder/package.json

@@ -1,4 +1,5 @@
 import rollupPluginNodeResolve from '@rollup/plugin-node-resolve';
+import rollupPluginReplace from '@rollup/plugin-replace';
 import { getBuilderOptions } from '@storybook/core-common';
 import { logger } from '@storybook/node-logger';
 // Import both globals and globalsNameReferenceMap to prevent retrocompatibility.
@@ -23,10 +24,12 @@ import {
   rollupPluginPrebundleModules,
 } from './rollup-plugin-prebundle-modules.js';
 import { rollupPluginStorybookBuilder } from './rollup-plugin-storybook-builder.js';
+import { stringifyProcessEnvs } from './stringify-process-envs.js';
 
 const wdsPluginExternalGlobals = fromRollup(rollupPluginExternalGlobals);
 const wdsPluginMdx = fromRollup(rollupPluginMdx);
 const wdsPluginPrebundleModules = fromRollup(rollupPluginPrebundleModules);
+const wdsPluginReplace = fromRollup(rollupPluginReplace);
 const wdsPluginStorybookBuilder = fromRollup(rollupPluginStorybookBuilder);
 
 export type StorybookConfigWds = StorybookConfigBase & {
@@ -90,6 +93,11 @@ export const start: WdsBuilder['start'] = async ({ startTime, options, router, s
       wdsPluginStorybookBuilder(options),
       wdsPluginMdx(options),
       wdsPluginExternalGlobals(globalsNameReferenceMap || globals),
+      wdsPluginReplace({
+        ...stringifyProcessEnvs(env),
+        include: ['**/node_modules/@storybook/**/*'],
+        preventAssignment: true,
+      }),
     ],
   };
 
@@ -164,6 +172,11 @@ export const build: WdsBuilder['build'] = async ({ startTime, options }) => {
       rollupPluginStorybookBuilder(options),
       rollupPluginMdx(options),
       rollupPluginExternalGlobals(globalsNameReferenceMap || globals),
+      rollupPluginReplace({
+        ...stringifyProcessEnvs(env),
+        include: ['**/node_modules/@storybook/**/*'],
+        preventAssignment: true,
+      }),
     ],
   };
 

packages/storybook-builder/src/index.ts

@@ -1,11 +1,10 @@
 import type { Options } from '@storybook/types';
-import { stringifyProcessEnvs } from '@storybook/core-common';
 import { build } from 'esbuild';
 import { rm, readFile } from 'node:fs/promises';
 import { join, normalize, isAbsolute, dirname } from 'node:path';
 import type { Plugin } from 'rollup';
 import { esbuildPluginCommonjsNamedExports } from './esbuild-plugin-commonjs-named-exports.js';
-import { getNodeModuleDir } from './get-node-module-dir.js';
+import { stringifyProcessEnvs } from './stringify-process-envs.js';
 
 export const PREBUNDLED_MODULES_DIR = normalize('node_modules/.prebundled_modules');
 
@@ -46,15 +45,7 @@ export function rollupPluginPrebundleModules(
           }),
         },
         external: [...modules],
-        define: (() => {
-          const define = stringifyProcessEnvs(env);
-
-          // "NODE_PATH" pollutes the output, it's not used by prebundled modules and is not recommended in general
-          // see more https://github.com/nodejs/node/issues/38128#issuecomment-814969356
-          delete define['process.env.NODE_PATH'];
-
-          return define;
-        })(),
+        define: stringifyProcessEnvs(env),
         plugins: [esbuildPluginCommonjsNamedExports(modules)],
       });
     },

packages/storybook-builder/src/rollup-plugin-prebundle-modules.ts

@@ -0,0 +1,11 @@
+import { stringifyProcessEnvs as storybookStringifyProcessEnvs } from '@storybook/core-common';
+
+export function stringifyProcessEnvs(env: Record<string, string>) {
+  const result = storybookStringifyProcessEnvs(env);
+
+  // "NODE_PATH" pollutes the output, it's not really used and is not recommended in general
+  // see more https://github.com/nodejs/node/issues/38128#issuecomment-814969356
+  delete result['process.env.NODE_PATH'];
+
+  return result;
+}

packages/storybook-builder/src/stringify-process-envs.ts

@@ -57,12 +57,6 @@
       // doesn't fail (it will simply be disabled)
       window.module = undefined;
       window.global = window;
-      window.process = {
-        env: {
-          // TODO(storybook): unlikely this works properly in the rollup build, but somehow it wasn't failing either
-          NODE_ENV: 'development',
-        },
-      };
     </script>
     <!-- [HEAD HTML SNIPPET HERE] -->
   </head>