10.0.8: Env variables redefined within next.config.js are undefined in dev mode

[krall12]

What version of Next.js are you using?

10.0.8

What version of Node.js are you using?

14.15.1

What browser are you using?

Tested in Firefox and Safari

What operating system are you using?

macOS Big Sur 11.2.1

How are you deploying your application?

yarn dev, yarn build && yarn start

Describe the Bug

Environment variables defined in next.config.js return undefined in page components when on dev mode (yarn dev).
But running the same project on production (yarn build && yarn start) the env variables work as expected.

Expected Behavior

If env variables are set in an .env file at the root of the project and then exposed to Next.js within the next.config.js file I would expect them to be accessible in component code in both production and development environments.

To Reproduce

1. Clone example project. https://github.com/krall12/nextjs-env-config-dev-bug
2. Install deps
3. run yarn dev and open browser. You should see the test environment variable not defined.
4. run yarn build && yarn start and open your browser. You should see the test environment variable correctly defined.

As a control:

1. yarn add [email protected]
2. in both dev and production modes the environment variable is returned correctly.

[neilpoulin]

same issue here. Saw after upgrading from next 10.0.4 -> 10.0.8. I have several env variables mapped to my publicRuntimeConfig in my next.config.js file and now everything comes through as undefined. Here's my full next.config.js

All of the process.env.** variables are defined in a .env file in the root of the project. I tried adding all of the variables to an .env.local and that had no effect.

console.log('next.config process.env: API_HOST', process.env.API_HOST); // this prints the API_HOST as undefined when starting the server
module.exports = {
    target: 'server',
    serverRuntimeConfig: {
        secretKey: process.env.SECRET_KEY,
    },
    publicRuntimeConfig: {
        apiHost: process.env.API_HOST,
        googleClientId: process.env.GOOGLE_CLIENT_ID,
        webHost: process.env.WEB_HOST,
    },
};

[TimNZ]

In 10.0.0.8 development phase, in browser, process.env is now = {}.
Perhaps DefinePlugin integration was broken.

[violabg]

I solved this by prefixing all env variables that I need on the browser with NEXT_PUBLIC_

[weyert]

Yes, I am having a similar issue when I am using something like this in the next.config.js-file:

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
})

console.log(process.env.NEXT_PUBLIC_PUBLIC_KEY, process.env.NAMESPACE)
module.exports = withBundleAnalyzer({
  pageExtensions: ['ts', 'tsx', 'mdx'],
  distDir: 'build',

  //
  publicRuntimeConfig: {
    publicKey: process.env.NEXT_PUBLIC_PUBLIC_KEY,
  },
})

Looks like the next.config.js file gets loaded before the .env.local-file is being loaded, in 10.0.7 I am getting:

Loaded env from /Users/weyert/Development/Projects/demo/.env.local
6b22eeb0-d5d7-4db7-84d2-5931205687b3 undefined
info  - Using external babel configuration from /Users/weyert/Development/Projects/demo/.babelrc

while in 10.0.8:

undefined undefined
info  - Loaded env from /Users/weyert/Development/Projects/demo/.env.local
info  - Using external babel configuration from /Users/weyert/Development/Projects/demo/.babelrc

[tophsic]

@violabg Using NEXT_PUBLIC_ environment variables does not solve the issue. I added an example from @krall12 failing example : https://github.com/TheRealCodeKraft/nextjs-env-config-dev-bug.

Can you give a working example of what you've done? Thanks

I still have the issue on canary branch of Next.js (10.0.9-canary.0).

[violabg]

actually, I still have problems #22843 .
I'm able to read the environmental variables with NEXT_PUBLIC_, but having basePath problems, I don't know if it's related to this.

[nfantone]

I've been accessing values in .env.local from next.config.js to configure my image.domains for the new next/image component.

// next.config.js

module.exports = {
  images: {
    domains: [
      hostname(process.env.NEXT_PUBLIC_ASSETS_BASE_URL)
    ]
  }
}

This used to work before the upgrade to 10.0.8. It now returns undefined.

[jsonchou]

Try this version

yarn add next@10.0.8-canary.9

10.0.8-canary.9+ bigger than canary 9, all of the env files are delayed loaded.

[ciruz]

@jsonchou thank you, your recommended version fixed all of my problems. Dynamic next/images domains, next-secure-headers, process.env variables, etc.

[ijjk]

Hi, this should be corrected in v10.0.9-canary.2 of Next.js, please upgrade and give it a try!

[krall12]

@ijjk works great now, thanks!

[OmgDef]

@ijjk v10.0.9-canary.2 fixes the issue for next.config.js, but breaks env variables for a custom server

[ijjk]

@OmgDef can you provide a reproduction for the issue with your custom server that was working on a previous version but not the latest?

[OmgDef]

@ijjk I created a repo here https://github.com/OmgDef/next-env-server. By default, next version is 10.0.7. If you upgrade next, PORT and SECRET are undefined

[ijjk]

@OmgDef looks like you were relying on un-documented env loading behavior in your custom-server. We don't guarantee the env will be loaded immediately there and if you need this behavior you can load it manually using the loadEnvConfig function from the @next/env package

[underfisk]

@ijjk It seems not to be working, with the reproduction i've sent you over #22847 it does not pass the variables i do have and process.env ends up clear in the app using canary 2 and 5 version

[nfantone]

FWIW, I can confirm that it is working for me after upgrading to 10.0.9-canary.5. process.env now holds everything on my .env.local and can be read from next.config.js.

[underfisk]

@nfantone I tried but it doesn't work for me, even just passing a custom variable with a random value in the env property of next.config it doesn't work

[nfantone]

@underfisk Mind sharing your setup so we could take a look at what might need changing?

[underfisk]

@nfantone Yes, i did already on other issue but here is the repo (a simple version of it): https://github.com/underfisk/vercel-issue-app

[nfantone]

@underfisk I'm sorry - didn't know you had share it before. Completely missed that.

I took a peek and the setup looked a bit foreign to me. I could not find a next.config.js file.

Could you describe the issue you're seeing some more, please?

[underfisk]

@underfisk I'm sorry - didn't know you had share it before. Completely missed that.

I took a peek and the setup looked a bit foreign to me. I could not find a next.config.js file.

Could you describe the issue you're seeing some more, please?

Oh i'm sorry, i probably did forgot to add in there because it was a sample for Vercel team but sure, here it is the next config file

const { nextI18NextRewrites } = require('next-i18next/rewrites')
const localeSubpaths = {}
const withNx = require('@nrwl/next/plugins/with-nx')

if (process.env.NX_SERVERLESS) {
	console.log('App is running in the serverless mode!')
}

module.exports = withNx({
	rewrites: async () => nextI18NextRewrites(localeSubpaths),
	publicRuntimeConfig: {
		localeSubpaths,
	},
	poweredByHeader: false,
	devIndicators: {
		autoPrerender: false,
	},
	env: {
		PUSHER_CLIENT_KEY: process.env.PUSHER_CLIENT_KEY,
		API_URL: process.env.NX_SERVERLESS
			? 'my api url..'
			: process.env.API_URL,
	},
	images: {
		domains: [
			'my domain list here'
		],
	},
})

Even domains are ignored
NX_SERVERLESS is a custom process env flag that i pass just to check whether it uses a remote serverless api or our local, simple as that

[nfantone]

@underfisk Where are those env vars defined? I could only fish out the NX_SERVERLESS value from the package.json "script" - but I did not find any .env.* files, which is what this issue is about.

Additionally, your test project is still depending on 10.0.8. Did you try updating to 10.0.9-canary.5?

[underfisk]

@nfantone No need, that's the thing, if you pass on the env object any custom, lets say PUSHER_CLIENT_KEY is directly a string in there, if you do that and try to console log on the app, its empty (the whole env object)
Yes i did try and also the 10.0.7, its 10.0.8 in that version because of the other git issue i've raised in here but i did try a lot of different things.
Even though, images domains are not even being loaded, what about that. If you use an AWS S3 image and set the hostname in there (assuming that image is using on the next/image component) it will say the hostname is not added but i do have it and even tried using wildcard

[nfantone]

@underfisk

No need, that's the thing, if you pass on the env object any custom, lets say PUSHER_CLIENT_KEY is directly a string in there, if you do that and try to console log on the app, its empty (the whole env object)

How exactly are you passing the vars onto the script? And which OS are you on?

The following is working just fine for me:

// next.config.js
console.log('my test env var ->', process.env.TEST_ENV_VAR);

module.exports = { ... };

// package.json
{
  "scripts": {
     "start": "NEXT_TELEMETRY_DISABLED=1 TEST_ENV_VAR=foo next start -p 8090 -H 0.0.0.0",
  }
}

❯ yarn start
yarn run v1.22.10
$ NEXT_TELEMETRY_DISABLED=1 TEST_ENV_VAR=foo next start -p 8090 -H 0.0.0.0
ready - started server on 0.0.0.0:8090, url: http://localhost:8090
info  - Loaded env from /path/to/project/.env.local

my test env var -> foo

[underfisk]

I'm on mac big sur (latest version)
I'm passing the same way as you are via start script but there is one thing you forgot, i have an Nx workspace and you have to run using Nx not directly using next and when you a custom env var like that (thats how i do it) you will see it empty
Well in the example project i do send it so it could be testing along with Nx not alone, i do understand but if its working here normally then its an Nx issue with next package, either way i'm a bit confused

[nfantone]

@underfisk Yeah - yours seems to be an entirely different issue. I have no experience with nx as a tool, so I'm afraid I can't help you there much. But, as a general rule, env vars passed as pre-arguments to a script do not necessarily carry on forward to its children.

From the nx docs, it seems like they do some curating on env vars.

It's important to note that NX will only include in the process default and NX prefixed env vars such as: NODE_ENV or NX_CUSTOM_VAR.

So sounds to me that something like PUSHER_CLIENT_KEY would not work? They also pre-load .env file, so there might even be some kind of clashing with next in this area, as well.

[underfisk]

@nfantone The funny thing is that it always worked, only when i upgraded to latest next version it stopped working, i know i need the NX custom var locally but PUSHER client and the rest is getting injected in vercel at settings so its not a problem, in our real app we have a fallback when its undefined from the env, the issue here is not that is that if you pass the custom NX_CUSTOM_VAR its not passed to the next somehow but i'm afraid there is a bigger fish which is images/domain are not being considered, what about that? If you set a valid domain of one of your CDN its not doing anything even with localhost.
I'm afraid this issue can be related with nx/next because they might have upgraded to latest next and something has been broken, so far one bad thing about NX is that when they update one package you need to update all or it breaks the whole ecosystem and each time sometime new is broken
I'll continue to search and trying but issue then might be related to nx if with the pure next its fixed

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.