Unable to load env variables when using with Next.js 😔

[PsyGik]

So I have a weird problem and I've been at it for a couple of hours but can't figure out the solution.

I have a Next.js app setup with a custom server,

const next = require('next');
const express = require('express');
const app = next({ dev, quiet: !dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get('/ping', (_, res) => res.send(`Pong: ${new Date()}`));

  // Proxy in Dev, because we have values in prod
  server.use('/path/one/*', proxyOneHandler);
  server.use('/path/two/*', proxyTwoHandler);

  // Let Next.js handle rest of the routes
  server.all('*', handle);

  server.listen(port, (err) => {
    if (err) throw err;
    console.log('Environment: ', process.env.NODE_ENV);
    console.log(`Server 🚀 at http://localhost:${port}`);
  });
});

Nothing fancy here, /path/one/* and /path/two/* are the paths which needs to be proxied. And the proxyOneHandler looks like:

const proxyOneHandler = createProxyMiddleware({
  target: process.env.PROXY_PATH || 'http://localhost:5000',
  changeOrigin: true,
  pathRewrite: {
    '/path/one/api': '/api',
  },
  onProxyReq(proxyReq) {
    proxyReq.setHeader('cookie', 'val=123');
  },
});

For the sake of brevity, assume proxyTwoHandler is similarly setup.

Now the issue is, HPM starts the proxy before Next.js loads the env variables. Because of which process.env.PROXY_PATH is always undefined. I've pasted the startup logs below, as you can see, Loaded env from /Users/developer/project/.env comes after HPM has created proxy.

❯ node index.js
[HPM] Proxy created: /  -> https://localhost:5001
[HPM] Proxy created: /  -> http://localhost:5000
[HPM] Proxy rewrite rule created: "/path/one/api" ~> "/api"
info  - Loaded env from /Users/developer/project/.env
info  - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
event - compiled successfully

So essentially the question is, Is there a way to let HPM know to wait till Next.js is done loading? Maybe delaying it some way?

[chimurai]

Think it's more a question for next whether they can ensure the env variables can loaded before/during app.prepare().

Instead of waiting and delaying (which HPM does not do); You can ensure environment variable are loaded by preloading them.

Preloading .env can be done like this:

node -r dotenv/config your_script.js dotenv_config_path=/custom/path/to/.env

docs: https://www.npmjs.com/package/dotenv