Cli: Next.js dev environment variables overwritten with production values by netlify dev

[ercgrat]

When running netlify dev, local root .env variables are overwritten by the Netlify variables pulled from my production settings (Site settings > Build & deploy > Environment > Environment variables). This is at least true for the variables that I need to be accessible in the browser with the NEXT_PUBLIC_ prefix (blog post).

My .env file contains (my file is actually 'env.local' but I reproduced this with .env):

NEXT_PUBLIC_PAYPAL_ENV=sandbox

My production settings contain: NEXT_PUBLIC_PAYPAL_ENV=production. The browser value of process.env.NEXT_PUBLIC_PAYPAL_ENV ends up being production when running netlify dev. I have confirmed that other NEXT_PUBLIC_ variables _not_ set in production are still correct in the browser when running locally, so the problem lies with Netlify.

I have to work around this by creating a new, dev-specific environment variable that takes precedence over the one shared between development and production. This is the code I use in my React component to avoid the issue:

let env = process.env.NEXT_PUBLIC_PAYPAL_ENV_DEV;
if (!env) {
    env = process.env.NEXT_PUBLIC_PAYPAL_ENV;
}

I don't think it's relevant here but this is my netlify.toml:

[build]
publish = "out/"
functions = "functions/"

[dev]
command = "npm run dev"

Here's my netlify dev output. What's interesting to me is that the next.js environment variable load does appear later in the sequence, but maybe it chooses not to override existing values.

>netlify dev
◈ Netlify Dev ◈
◈ Injected addon env var: FAUNADB_ADMIN_SECRET
◈ Injected addon env var: FAUNADB_SERVER_SECRET
◈ Injected addon env var: FAUNADB_CLIENT_SECRET
◈ Injected build setting env var: NEXT_PUBLIC_PAYPAL_ENV
◈ Injected build setting env var: NODE_ENV
◈ Overriding command with setting derived from netlify.toml [dev] block: npm run dev
◈ Functions server is listening on 60715
◈ Starting Netlify Dev with next

> [email protected] dev C:\Users\ercgr\Documents\UrbanBasic\creator
> next dev

Loaded env from C:\Users\ercgr\Documents\UrbanBasic\creator\.env.local
ready - started server on http://localhost:3000

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8888   │
   │                                                 │
   └─────────────────────────────────────────────────┘

event - compiled successfully

[ercgrat]

Just documenting for the sake of it...

Confirmed this is the root cause of a different issue I'm encountering with material UI server-side rendering. There is a common issue of mismatch between client classes and server-rendered classes that I've already fixed using the recommended solution. Haven't had issues when running next dev, but netlify dev reintroduces the issue. Injecting NODE_ENV=production causes a mismatch between the SSR output and the browser's expectations.

Warning: Prop `className` did not match. Server: "jss11" Client: "PrivateSwitchBase-input-11"
    in input (created by ForwardRef(SwitchBase))
    in span (created by ForwardRef(IconButton))
    in span (created by ForwardRef(ButtonBase))
    in ForwardRef(ButtonBase) (created by WithStyles(ForwardRef(ButtonBase)))
    in WithStyles(ForwardRef(ButtonBase)) (created by ForwardRef(IconButton))
    in ForwardRef(IconButton) (created by WithStyles(ForwardRef(IconButton)))
    in WithStyles(ForwardRef(IconButton)) (created by ForwardRef(SwitchBase))
    in ForwardRef(SwitchBase) (created by WithStyles(ForwardRef(SwitchBase)))
    in WithStyles(ForwardRef(SwitchBase)) (created by ForwardRef(Radio))
    in ForwardRef(Radio) (created by WithStyles(ForwardRef(Radio)))
    in WithStyles(ForwardRef(Radio)) (created by ThemedRadio)
    in label (created by ForwardRef(FormControlLabel))
    in ForwardRef(FormControlLabel) (created by WithStyles(ForwardRef(FormControlLabel)))
    in WithStyles(ForwardRef(FormControlLabel)) (created by ThemedRadio)
    in ThemedRadio (created by ThemedRadioGroup)
    in div (created by ForwardRef(FormGroup))
    in ForwardRef(FormGroup) (created by WithStyles(ForwardRef(FormGroup)))
    in WithStyles(ForwardRef(FormGroup)) (created by ForwardRef(RadioGroup))
    in ForwardRef(RadioGroup) (created by ThemedRadioGroup)
    in fieldset (created by ForwardRef(FormControl))
    in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
    in WithStyles(ForwardRef(FormControl)) (created by ThemedRadioGroup)
    in ThemedRadioGroup (created by PositionRadioGroup)
    in PositionRadioGroup (created by Customizer)
    in div (created by Customizer)
    in div (created by Customizer)
    in Customizer (created by Home)
    in div (created by ForwardRef(CardContent))
    in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent)))
    in WithStyles(ForwardRef(CardContent)) (created by Page)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by Page)
    in main (created by Page)
    in div (created by Page)
    in Page (created by Home)
    in Home (created by App)
    in ThemeProvider (created by App)
    in App
    in ErrorBoundary (created by ReactDevOverlay)
    in ReactDevOverlay (created by Container)
    in Container (created by AppContainer)
    in AppContainer
    in Root

[WensleyD]

I'm experiencing a similar issue, it seems since v2.65.0 netlify dev isn't seeing the .env file for me.

The following expected line in the terminal is missing & variables aren't being overridden: (Should be just below env var injections)

◈ Overriding the following env variables with .env file: VUE_APP_SANITY_DATASET,VUE_APP_STRIPE_PUBLISHABLE_KEY,STRIPE_SECRET_KEY

Downgrading to v2.64.1 fixed the issue for me. The change log shows edits to this functionality. Maybe a break?

[erezrokah]

Hi 👋 Sorry for the late reply on this. This should be fixed in https://github.com/netlify/cli/pull/1490.
I wanted to some refactoring to make env var handing code more straightforward before fixing this.
Hopefully that would make it easier to avoid such bugs in the future.