fallback for `process.env` causes build to fail with "Unexpected token: punc (.)"

[mathiasschopmans]

Current Behavior

After upgrading to an Nx version that includes the PR #30826 (v22.2.2+), webpack builds can fail with:

Unexpected token: punc (.)

This happens when application code (or libraries like unleash) accesses undefined environment variables via dot notation:

const getFrontendUrl = () =>
  process.env.UNLEASH_FRONTEND_API_URL ||
  process.env.NEXT_PUBLIC_UNLEASH_FRONTEND_API_URL;

Due to the changes in PR #30826, Nx now injects a fallback into DefinePlugin:

{ 'process.env': '{}' }

When webpack performs textual replacement, this produces:

const getFrontendUrl = () => {}.UNLEASH_FRONTEND_API_URL ||
  "https://example.com/unleash-edge/api/frontend";

{}.UNLEASH_FRONTEND_API_URL is invalid JavaScript because {} is parsed as a block statement rather than an object literal. The parser then fails at the . token.

This is a hard compilation error and prevents the project from building.

Expected Behavior

Accessing process.env.SOME_KEY should never result in syntactically invalid JavaScript.

If Nx injects a fallback for process.env, it must be syntactically safe for property access (e.g. ({})) or handled in a way that does not break dot notation.

GitHub Repo

No response

Steps to Reproduce

Try to compile code, which uses undefined environment varibales, like the code shown above:

const getFrontendUrl = () =>
  process.env.UNLEASH_FRONTEND_API_URL ||
  process.env.NEXT_PUBLIC_UNLEASH_FRONTEND_API_URL;

To just check the syntax error try the following in your browser's console.

{}.NOT_KNOWN
💣 Uncaught SyntaxError: Unexpected token '.'

({}).NOT_KNOWN
✅ undefined

Nx Report

-

Failure Logs

ERROR in 377.3b560dae854f11f6.js
377.3b560dae854f11f6.js from Terser plugin
Unexpected token: punc (.) [377.3b560dae854f11f6.js:45825,undefined]

Package Manager Version

No response

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

This regression appears to be introduced by PR #30826, specifically:

• packages/webpack/src/utils/get-client-environment.ts:29
• Fallback definition: { 'process.env': '{}' }

Because DefinePlugin performs raw token replacement (not AST transformation), replacing process.env with {} causes dot access to become invalid syntax.

Suggested Fix

Change the fallback to:

{ 'process.env': '({})' }

I hotfixed this in my current project and was able to build with the following webpack.config.js:

function getProcessEnv() {
  return {
    'process.env.NEXT_PUBLIC_UNLEASH_FRONTEND_API_URL': JSON.stringify(
      process.env.NEXT_PUBLIC_UNLEASH_FRONTEND_API_URL,
    ),
    // ...
  };
}

module.exports = composePlugins(
  withNx(),
  withReact(),
  (config) => {
    // there was a breaking change in nx v22.2.2+ which sets `process.env` to an empty object
    // which causes issues with some libraries like unleash to fail compiling.
    // change definitions of `process.env` to `({})` to prevent syntax issues
    // related to https://github.com/nrwl/nx/pull/30826/changes
    const definePluginIndex = config.plugins.findIndex(
      (plugin) => plugin instanceof webpack.DefinePlugin,
    );

    if (definePluginIndex !== -1) {
      config.plugins[definePluginIndex].definitions['process.env'] = '({})';
    }

   config.plugins.push(new webpack.DefinePlugin(getProcessEnv()));
  // ...

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.