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

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

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

As a control:

yarn add next@10.0.7
in both dev and production modes the environment variable is returned correctly.

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 18
Comments: 29 (5 by maintainers)

Commits related to this issue

Ensure env is loaded before next config (#22879) This ensures we load all env values before loading `next.config.js` since these values can be used in there. This also updates to ensure we're testing... — committed to vercel/next.js by ijjk 3 years ago

Most upvoted comments

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

ijjk on Mar 8, 2021

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.

nfantone on Mar 8, 2021

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.

jsonchou on Mar 8, 2021

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

violabg on Mar 6, 2021

@ijjk works great now, thanks!

krall12 on Mar 8, 2021