All env variables become `undefined` after upgrade to NextJS 13 from NextJS 12.3.1 (while using custom server)

gadingnst commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 22.1.0: Sun Oct 9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103 Binaries: Node: 16.15.1 npm: 8.11.0 Yarn: 1.22.19 pnpm: N/A Relevant packages: next: 13.0.3 eslint-config-next: 13.0.3 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

Version 106.0.5249.119 (Official Build) (arm64)

How are you deploying your application? (if relevant)

No response

Describe the Bug

is NextJS 13 stable? why did my environment variables become undefined after upgrading NextJS 13 even though I haven’t changed anything? just npm i next@latest

Expected Behavior

ENV Variable can read properly

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/gadingnst/nextjs13-custom-server-bug

To Reproduce

Clone https://github.com/gadingnst/nextjs13-custom-server-bug
npm install
npm run dev
See https://localhost:3000, there are logs all environments in dev tools become undefined.

Note: If we downgrade it to NextJS 12.3.1, it will log the expected variable.

balazsorban44 commented 1 year ago

As stated in https://nextjs.org/docs/basic-features/environment-variables#loading-environment-variables you should not use object destructing with process.env.

You can make this work by eg. upgrading config.ts to:

const PASSPORT_API_BASEURL = process.env.NEXT_PUBLIC_PASSPORT_API_BASEURL
export const IS_STAGING = PASSPORT_API_BASEURL?.includes('-stg') || false
export const Envs = {
  PASSPORT_API_BASEURL,
  NODE_ENV: process.env.NODE_ENV,
  SENTRY_DSN: process.env.NEXT_PUBLIC_SENTRY_DSN,
  FBPQ_APP_ID: process.env.NEXT_PUBLIC_FBPQ_APP_ID,
  GTM_CONTAINER_ID: process.env.NEXT_PUBLIC_GTM_CONTAINER_ID,
  GOOGLE_RECAPTCHA_SITE_KEY: process.env.NEXT_PUBLIC_GOOGLE_RECAPTCHA_SITE_KEY,
  ORAMI_URL: IS_STAGING ? 'https://stg.example.com' : 'https://example.com',
}

And change your import to import { Envs } from '@/utils/config'

gadingnst commented 1 year ago

Oh, I see. thank you.

github-actions[bot] commented 1 year ago

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

vercel / next.js