Apply NODE_ENV development for react-based projects

storybookjs · Dec 14, 2024 · 76e10e5 · 76e10e5
1 parent 126f504
commit 76e10e5
Show file tree

Hide file tree

Showing 7 changed files with 259 additions and 4 deletions.
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
@@ -84,7 +84,7 @@
     "url": "^0.11.0",
     "util": "^0.12.4",
     "util-deprecate": "^1.0.2",
-    "webpack": "5",
+    "webpack": "^5.97.1",
     "webpack-dev-middleware": "^6.1.2",
     "webpack-hot-middleware": "^2.25.1",
     "webpack-virtual-modules": "^0.6.0"

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/package.json b/code/frameworks/react-webpack5/package.json
@@ -50,7 +50,8 @@
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/preset-react-webpack": "workspace:*",
     "@storybook/react": "workspace:*",
-    "@types/node": "^22.0.0"
+    "@types/node": "^22.0.0",
+    "webpack": "^5.97.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",

diff --git a/code/frameworks/react-webpack5/src/preset.ts b/code/frameworks/react-webpack5/src/preset.ts
@@ -2,6 +2,8 @@ import { dirname, join } from 'node:path';
 
 import type { PresetProperty } from 'storybook/internal/types';
 
+import webpackDep from 'webpack';
+
 import type { StorybookConfig } from './types';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
@@ -31,5 +33,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 webpackDep.DefinePlugin({
+      NODE_ENV: JSON.stringify('development'),
+    }),
+  ];
   return config;
 };