process.env.NODE_ENV returns undefined in webpack 4, server-side

Question

in server code I have this:

import express from "express";
const server = express();
import path from "path";
// const expressStaticGzip = require("express-static-gzip");
import expressStaticGzip from "express-static-gzip";
import webpack from "webpack";
import webpackHotServerMiddleware from "webpack-hot-server-middleware";

import configDevClient from "../../config/webpack.dev-client";
import configDevServer from "../../config/webpack.dev-server.js";
import configProdClient from "../../config/webpack.prod-client.js";
import configProdServer from "../../config/webpack.prod-server.js";

const isProd = process.env.NODE_ENV === "production";
const isDev = !isProd;
const PORT = process.env.PORT || 8000;
let isBuilt = false;

const done = () => {
  !isBuilt &&
    server.listen(PORT, () => {
      isBuilt = true;
      console.log(
        `Server listening on http://localhost:${PORT} in ${process.env.NODE_ENV}`
      );
    });
};

if (isDev) {
  const compiler = webpack([configDevClient, configDevServer]);

  const clientCompiler = compiler.compilers[0];
  const serverCompiler = compiler.compilers[1];

  const webpackDevMiddleware = require("webpack-dev-middleware")(
    compiler,

    configDevClient.devServer
  );

  const webpackHotMiddlware = require("webpack-hot-middleware")(
    clientCompiler,
    configDevClient.devServer
  );

  server.use(webpackDevMiddleware);
  server.use(webpackHotMiddlware);
  console.log("process.env.NODE_ENV",process.env.NODE_ENV);//RETURNS UNDEFINED
  server.use(webpackHotServerMiddleware(compiler));
  console.log("Middleware enabled");
  done();
} else {
  webpack([configProdClient, configProdServer]).run((err, stats) => {
    const clientStats = stats.toJson().children[0];
    const render = require("../../build/prod-server-bundle.js").default;
    server.use(
      expressStaticGzip("dist", {
        enableBrotli: true
      })
    );
    server.use(render({ clientStats }));
    done();
  });
}

I client and server config files I have this plugin enabled:

new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development"),
        WEBPACK: true
      }

but this is the output

process.env.NODE_ENV undefined
Server listening on http://localhost:8000 in undefined

in client side it is working BUT express side process.env.NODE_ENV returns undefined

Answer 1

Assuming you using Webpack-Dev-Server, you can use this call syntax witch is proper :

const dev = Boolean( process.env.WEBPACK_DEV_SERVER )

You will no longer need to pass environment type parameters, because I think you pass parameters in your script run in packages.json

Answer 2

I'm writing my experience to help anyone out there with this problem, though I did not actually solve it. I had the same problem with setting the environment variables in my server-side project.

apparently, after you set the environment variables they are completely accessible in the building process, which is in the build tools like webpack config or even .babelrc.js .

but after the build process, the environment variables get overwritten AND there is a time gap between build process and overwriting environment variables .

I used many webpack or babel plugins but neither of them could hold on to environment variables after the build process ON the server-side but they were immediately defined on the client-side. since I'm using ReactJs , I tried adding REACT_APP_ to the beginning of variables, but still no luck.

some other plugins I used: webpack dotenv , webpack.DefinePlugin , webpack.EnvironmentPlugin , babel-plugin-transform-define , babel-plugin-transform-inline-environment-variables

so it made me use the good old-fashion way of setting environment.js on DEPLOY but not on the BUILD process.

in case someone is not familiar: you have one main environment.js and (in my case) 2 other files, one for staging environment.staging.js and one for production environment.prod.js . On each deploy, you copy the related js to environment.js , the main environment file, and in your code, you always read global CONSTs , baseUrl for APIs and ... from environment.js .

hope it helps someone out there.