process.env.NEXT_PUBLIC_HOSTNAME === "asd" evaluates at build time producing boolean

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System: Platform: linux Arch: x64 Version: #46~20.04.1-Ubuntu SMP Wed Apr 20 13:16:21 UTC 2022

Binaries: Node: 16.5.0 npm: 7.21.1 Yarn: N/A pnpm: N/A

Relevant packages: next: 12.1.6 react: 17.0.2 react-dom: 17.0.2

What browser are you using? (if relevant)

no relevant

How are you deploying your application? (if relevant)

no relevant

Describe the Bug

If I write in the api route: if (process.env.NEXT_PUBLIC_HOSTNAME === "asd") { return } and run npm run build then I get if (false) {}

Expected Behavior

After npm run build I want to get process.env.SOME_ENV === "asd" in the .next/server/api/route_some.js.

To Reproduce

Add some api route

import type { NextApiRequest, NextApiResponse } from "next"

const revalidate: (req: NextApiRequest, res: NextApiResponse) => void = async (
  req,
  res
) => {
  if (process.env.SOME_ENV === "asd") {
    return
  }
  await res.unstable_revalidate(req.query.pathname as string)
}

export default revalidate

add some NEXT_PUBLIC_HOSTNAME env to the .env.production file and set its valu to 0x9b6f927eb5b82abdd66959a7312fafda5c64fb49.

The compiled code is:

"use strict";
(() => {
var exports = {};
exports.id = 3500;
exports.ids = [3500];
exports.modules = {

/***/ 4152:
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
/* harmony export */ });
const revalidate = async (req, res)=>{
    if (false) {}
    await res.unstable_revalidate(req.query.pathname);
};
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (revalidate);


/***/ })

};
;

// load runtime
var __webpack_require__ = require("../../webpack-api-runtime.js");
__webpack_require__.C(exports);
var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))
var __webpack_exports__ = (__webpack_exec__(4152));
module.exports = __webpack_exports__;

})();

It is necessary to set env as 0x9b6f927eb5b82abdd66959a7312fafda5c64fb49.

[icyJoseph]

Unfortunately that’s how WebPack works.

This is actually used to do something called dead-code elimination where the block between if(false) {} is not used, and any code that is used there is also not bundled, even not imported if the bundler can figure that out.

Here’s a write up https://overreacted.io/how-does-the-development-mode-work/, on this technique.

So what’a happening here is that, at build time the variable is inlined, and the expression evaluated.

What you’d want to do here, is use runtime configuration, to prevent that, and make the assertion you want to do.

Short answer: it’s a webpack thing, which perhaps you can tweak in next.config.js.

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.