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

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any activity for 6 months. Many things may have changed within this time. The issue may have already been fixed or it may not be relevant anymore. If at this point, this is still an issue, please respond with updated information. It will be closed in 21 days if no further activity occurs. Thanks for being a part of the Nx community! 🙏