Apply NODE_ENV development for react-based projects

storybookjs · Dec 15, 2024 · 32b52ee · 32b52ee
1 parent 126f504
commit 32b52ee
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 3 deletions.
diff --git a/code/builders/builder-webpack5/src/index.ts b/code/builders/builder-webpack5/src/index.ts
@@ -16,13 +16,15 @@ import prettyTime from 'pretty-hrtime';
 import sirv from 'sirv';
 import { corePath } from 'storybook/core-path';
 import type { Configuration, Stats, StatsOptions } from 'webpack';
-import webpack, { ProgressPlugin } from 'webpack';
+import webpackDep, { DefinePlugin, ProgressPlugin } from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 
 export * from './types';
 export * from './preview/virtual-module-mapping';
 
+export const WebpackDefinePlugin = DefinePlugin;
+
 export const printDuration = (startTime: [number, number]) =>
   prettyTime(process.hrtime(startTime))
     .replace(' ms', ' milliseconds')
@@ -51,8 +53,8 @@ export const executor = {
   get: async (options: Options) => {
     const version = ((await options.presets.apply('webpackVersion')) || '5') as string;
     const webpackInstance =
-      (await options.presets.apply<{ default: typeof webpack }>('webpackInstance'))?.default ||
-      webpack;
+      (await options.presets.apply<{ default: typeof webpackDep }>('webpackInstance'))?.default ||
+      webpackDep;
     checkWebpackVersion({ version }, '5', 'builder-webpack5');
     return webpackInstance;
   },

diff --git a/code/frameworks/experimental-nextjs-vite/src/preset.ts b/code/frameworks/experimental-nextjs-vite/src/preset.ts
@@ -43,5 +43,10 @@ export const viteFinal: StorybookConfigVite['viteFinal'] = async (config, option
   const nextDir = nextConfigPath ? path.dirname(nextConfigPath) : undefined;
   plugins.push(vitePluginStorybookNextjs({ dir: nextDir }));
 
+  reactConfig.define = {
+    ...reactConfig.define,
+    'process.env.NODE_ENV': JSON.stringify('development'),
+  };
+
   return reactConfig;
 };
diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
@@ -63,6 +63,7 @@ const setupRuntimeConfig = async (
       serverRuntimeConfig: {},
       publicRuntimeConfig: nextConfig.publicRuntimeConfig,
     }),
+    'process.env.NODE_ENV': JSON.stringify('development'),
   };
 
   const newNextLinkBehavior = (nextConfig.experimental as any)?.newNextLinkBehavior;

diff --git a/code/frameworks/react-vite/src/preset.ts b/code/frameworks/react-vite/src/preset.ts
@@ -51,5 +51,10 @@ export const viteFinal: NonNullable<StorybookConfig['viteFinal']> = async (confi
     );
   }
 
+  config.define = {
+    ...config.define,
+    'process.env.NODE_ENV': JSON.stringify('development'),
+  };
+
   return config;
 };
diff --git a/code/frameworks/react-webpack5/src/preset.ts b/code/frameworks/react-webpack5/src/preset.ts
@@ -2,6 +2,10 @@ import { dirname, join } from 'node:path';
 
 import type { PresetProperty } from 'storybook/internal/types';
 
+import { WebpackDefinePlugin } from '@storybook/builder-webpack5';
+
+import webpackDep from 'webpack';
+
 import type { StorybookConfig } from './types';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
@@ -31,5 +35,12 @@ export const webpack: StorybookConfig['webpack'] = async (config) => {
     ...config.resolve?.alias,
     '@storybook/react': getAbsolutePath('@storybook/react'),
   };
+  config.plugins = [
+    // @ts-expect-error TODO
+    ...config.plugins,
+    new WebpackDefinePlugin({
+      NODE_ENV: JSON.stringify('development'),
+    }),
+  ];
   return config;
 };