Documentation states we can use environment variables within our application, but following the documentation doesn't work

[r3plica]

Documentation issue

• [ ] Reporting a typo
• [x] Reporting a documentation bug
• [ ] Documentation improvement
• [ ] Documentation feedback

Is there a specific documentation page you are reporting?

Enter the URL or documentation section here.

Additional context or description

I have spent too long trying to get this to work. We are using module federation apps in our nx workspace along with libraries. I follow the documentation and added this to my module-federation-config.js

require('dotenv').config();

const webpack = require('webpack');

function getClientEnvironment() {
  // Grab NX_* environment variables and prepare them to be injected
  // into the application via DefinePlugin in webpack configuration.
  const NX_APP = /^NX_/i;

  const raw = Object.keys(process.env)
    .filter((key) => NX_APP.test(key))
    .reduce((env, key) => {
      env[key] = process.env[key];
      return env;
    }, {});

  console.log(raw);

  // Stringify all values so we can feed into webpack DefinePlugin
  return {
    'process.env': Object.keys(raw).reduce((env, key) => {
      env[key] = JSON.stringify(raw[key]);
      return env;
    }, {}),
  };
}

console.log('NODE_ENV', process.env.NODE_ENV);

module.exports = {
  mode: process.env.NODE_ENV,
  name: 'platform',
  remotes: [],
  additionalShared: ['@trunarrative-ui/ui-components'],
  plugins: [new webpack.DefinePlugin(getClientEnvironment())],
};

I can confirm that when serve the application, the raw console.log is show correctly (although NODE_ENV) is undefined.

in my app.component.ts or any file in my libraries, if I add console.log(process.env); I get an error stating:

ReferenceError: process is not defined

I have tried so many things to get this to work. Every application and every library has a tsconfig.app|lib.json and a tsconfig.spec.json and all of them have:

"types": ["node"]

and in my package.json I have "@types/node": "^16.11.7", in the devDependencies, but it still doesn't work.

[maripop]

Hello!

I was having the same issue trying to use env variables with module federation. What it worked for me is use nx webpack composePlugins for webpack-config

const { composePlugins } = require('@nx/webpack');
const { withModuleFederation } = require('@nx/angular/module-federation');
const moduleFederationConfig = require('./module-federation.config');
const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = composePlugins(
  withModuleFederation(moduleFederationConfig),
  config => {
    config.plugins.push(new webpack.DefinePlugin(getProcessEnv()));
    return config;
  },
);

function getProcessEnv() {
  return {
    'process.env': JSON.stringify(dotenv.config().parsed),
  };
}

This composePlugins config is for angular app. Here it is the NX documentation for this: https://nx.dev/recipes/webpack/webpack-plugins#nxenhanced-plugins

Hope this helps!

[tommck]

I'm having the same problem. This is because it's not working for remotes :(

The host process environment variables are processed like I'd expect. The remotes get the vars from the root and from the host/shell