Nx vs Next.js | Environments files loaded in wrong order

[ild0tt0re]

trafficstars

Current Behavior

nx serve command, load .env file in apps/<next-app> two times:

• Nx loading...: see order priority
• Next.js loading...: see order priority

That cause .env file to be loaded in process.env on the first loading (Nx) so during the second loading (Next.js) the order is no longer maintained -> https://github.com/vercel/next.js/blob/canary/packages/next-env/index.ts#L52

i.e: same env var in both .env.development and .env, cause .env to have highest priority

Expected Behavior

The order of Next.js environment variables should be maintained

i.e: same env var in both .env.development and .env, should give to .env.development highest priority

Steps to Reproduce

1. Create Next.js app
2. Create all possibles env files supported by Next.js and set in each file an env var with the same key but different value https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
3. Launchnx serve
4. the order is not maintained (ie: in process.env.<envVarName> there is .env and not .env.development)

Environment

  Node : 14.17.0
  OS   : darwin x64
  yarn : 1.22.15

  nx : 12.9.0
  @nrwl/angular : Not Found
  @nrwl/cli : 12.9.0
  @nrwl/cypress : 12.9.0
  @nrwl/devkit : 12.9.0
  @nrwl/eslint-plugin-nx : 12.9.0
  @nrwl/express : Not Found
  @nrwl/jest : 12.9.0
  @nrwl/linter : 12.9.0
  @nrwl/nest : Not Found
  @nrwl/next : 12.9.0
  @nrwl/node : Not Found
  @nrwl/nx-cloud : Not Found
  @nrwl/react : 12.9.0
  @nrwl/schematics : Not Found
  @nrwl/tao : 12.9.0
  @nrwl/web : 12.9.0
  @nrwl/workspace : 12.9.0
  @nrwl/storybook : 12.9.0
  @nrwl/gatsby : Not Found
  typescript : 4.3.5

[kirjai]

hi @ild0tt0re , thanks for opening the issue!

so as you noted, Nx doesn't currently support environment variable files other than those that are mentioned in the docs that you linked to (Docs).

I assume this issue occurs only when you're using env files that Nx doesn't support, like env.development? Meaning, that this doesn't happen when using env.local, for example? If this only happens for env files that Nx doesn't currently support, I'd change this from a bug to an enhancement

[ild0tt0re]

hi @ild0tt0re , thanks for opening the issue!

so as you noted, Nx doesn't currently support environment variable files other than those that are mentioned in the docs that you linked to (Docs).

I assume this issue occurs only when you're using env files that Nx doesn't support, like env.development? Meaning, that this doesn't happen when using env.local, for example? If this only happens for env files that Nx doesn't currently support, I'd change this from a bug to an enhancement

Hi @kirjai , thanks for the answer.

Exactly! Fortunately, the environment variables loading process logic of Nx and Next.js is the same so if Nx can handle also these files would be great because we can use the framework transparently without having any side effects.

[chf007]

#https://github.com/ZachJW34/nx-plus/issues/239

Can Nx provide a configuration item to turn off its own dotenv processing, which is completely handled by plugins?

[the1979]

+1 for consideration on this. It would be great if it matches the Next.js behaviour.

[kalinchernev]

Same issue with loading order holds true for nest.js + nx combination. The load order of nx overrides the one of the nest.js config module definition which makes the integration not as smooth as everything else nx does so far.

A configuration option to disable default loader would be welcome.

[kalinchernev]

And as a follow-up => https://github.com/nrwl/nx/releases/tag/14.8.6

[ndcunningham]

Closing due to no activity and should be working currently. As of Nx v16.3.0 we are now using the Next.js CLI for our build / server executor.

[github-actions[bot]]

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.