diff --git a/src/scripts/build.ts b/src/scripts/build.ts index 518b19fbf..4fb53bebb 100644 --- a/src/scripts/build.ts +++ b/src/scripts/build.ts @@ -6,7 +6,11 @@ export default function build( config: Rsg.SanitizedStyleguidistConfig, callback: (err: Error, stats: webpack.Stats) => void ) { - return webpack(makeWebpackConfig(config, 'production'), (err, stats) => { + // FIX: Allow process.env.NODE_ENV to override the default 'production' state + // This prevents the mismatch where Babel thinks it is in one env and Styleguidist another. + const env = (process.env.NODE_ENV as 'development' | 'production' | 'none') || 'production'; + + return webpack(makeWebpackConfig(config, env), (err, stats) => { // require('fs').writeFileSync('stats.json', JSON.stringify(stats.toJson())); callback(err as Error, stats as webpack.Stats); }); diff --git a/src/scripts/make-webpack-config.ts b/src/scripts/make-webpack-config.ts index 9665df9a3..7b6a159ef 100644 --- a/src/scripts/make-webpack-config.ts +++ b/src/scripts/make-webpack-config.ts @@ -26,9 +26,13 @@ export default function ( config: Rsg.SanitizedStyleguidistConfig, env: 'development' | 'production' | 'none' ): Configuration { - process.env.NODE_ENV = process.env.NODE_ENV || env; + // FIX: Prioritize the existing process.env.NODE_ENV if it's already set + // This ensures that Babel and other loaders see the same environment as Styleguidist + const activeEnv = process.env.NODE_ENV || env; + process.env.NODE_ENV = activeEnv; - const isProd = env === 'production'; + // Use the resolved activeEnv for production checks + const isProd = activeEnv === 'production'; const template = isFunction(config.template) ? config.template : MiniHtmlWebpackTemplate; const templateContext = isFunction(config.template) ? {} : config.template; @@ -44,7 +48,8 @@ export default function ( let webpackConfig: Configuration = { entry: config.require.concat([path.resolve(sourceDir, 'index')]), - mode: env, + // FIX: Use activeEnv for mode to keep Webpack optimization in sync with NODE_ENV + mode: activeEnv as 'development' | 'production' | 'none', output: { path: config.styleguideDir, filename: 'build/[name].bundle.js',