Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

NX_ environment variables are undefined on a client in Next.js development #17940

Closed
1 of 4 tasks
skoob13 opened this issue Jul 4, 2023 · 5 comments · Fixed by #18892
Closed
1 of 4 tasks

NX_ environment variables are undefined on a client in Next.js development #17940

skoob13 opened this issue Jul 4, 2023 · 5 comments · Fixed by #18892
Assignees
Labels
outdated scope: nextjs Issues related to NextJS support for Nx type: bug

Comments

@skoob13
Copy link

skoob13 commented Jul 4, 2023

Current Behavior

Environment variables that are prefixed with NX_ are undefined during development in Next.js on a client. They work as expected on the server's side. It works correctly in production mode though. Both a client and server show correct environment variables.

Expected Behavior

Environment variables that are prefixed with NX_ should be defined on a client during development.

GitHub Repo

https://github.com/skoob13/nx-next-dev-server-bug

Steps to Reproduce

  1. Install dependencies (yarn)
  2. Run the development server using yarn nx run ui:serve
  3. Open localhost:4200 in a browser
  4. Observe that the server outputs the environment variable correctly and the client outputs undefined in the browser's console.

Nx Report

Node   : 18.16.0
   OS     : darwin-arm64
   yarn   : 1.22.19

   nx                 : 16.4.3
   @nx/js             : 16.4.3
   @nx/jest           : 16.4.3
   @nx/linter         : 16.4.3
   @nx/workspace      : 16.4.3
   @nx/cypress        : 16.4.3
   @nx/devkit         : 16.4.3
   @nx/eslint-plugin  : 16.4.3
   @nx/next           : 16.4.3
   @nx/react          : 16.4.3
   @nrwl/tao          : 16.4.3
   @nx/web            : 16.4.3
   typescript         : 5.1.6

Failure Logs

No response

Operating System

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

Additional Information

I've tested different Next.js versions and environment variables don't work on a client on any 13.4.* version. It works correctly on 13.3.* versions though.

As a temporary solution it's possible to use env in next.config.js defining prefixed with NX_ variables manually.

@leosvelperez leosvelperez added the scope: nextjs Issues related to NextJS support for Nx label Jul 5, 2023
@enk0de
Copy link

enk0de commented Jul 6, 2023

i am suffering this too.

@enk0de
Copy link

enk0de commented Aug 10, 2023

when is it solved? i need to upgrade to next.js 13.4 :)

@anthodb
Copy link

anthodb commented Aug 23, 2023

Same here with Next 13.4.19 and NX 16.7.3. Env variables are not working anymore..

@ndcunningham ndcunningham self-assigned this Aug 28, 2023
ndcunningham added a commit to ndcunningham/nx that referenced this issue Aug 29, 2023
When we add NX_ vars to Webpack Define it would be available to both client and server.
This does not follow Next.js' concept to only add environment variables prefixed with NEXT_PUBLIC_ to the client

As such to get acces to environment variables declared in the .env file consumers should use the NEXT_ or NEXT_PUBLIC_ prefix

closes: nrwl#17940
@ndcunningham
Copy link
Contributor

This probably started occurring when we switched over to use the Next CLI.

Moving forward, we want to keep our package close to Next.js' as such we will deprecate this feature and it will be removed in Nx 18.
The reasoning is that NX_ vars would be available to the client which could expose unwanted information.
The functionality is still available should you want an env variable defined in a .env file on the client side you should use
NEXT_PUBLIC_ prefix otherwise you can use NEXT_ for server-side only.

ndcunningham added a commit to ndcunningham/nx that referenced this issue Aug 29, 2023
When we add NX_ vars to Webpack Define it would be available to both client and server.
This does not follow Next.js' concept to only add environment variables prefixed with NEXT_PUBLIC_ to the client

As such to get acces to environment variables declared in the .env file consumers should use the NEXT_ or NEXT_PUBLIC_ prefix

closes: nrwl#17940
@github-actions
Copy link

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 29, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
outdated scope: nextjs Issues related to NextJS support for Nx type: bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants