[🐛 Bug]: next-on-pages build does not propagate NODE_ENV

[dodrian]

Cli version

0.7.0

Next.js related information

 Operating System:       Platform: darwin       Arch: arm64       Version: Darwin Kernel Version 21.6.0: Mon Dec 19 20:46:01 PST 2022; root:xnu-8020.240.18~2/RELEASE_ARM64_T8101     Binaries:       Node: 19.6.0       npm: 9.4.0       Yarn: 1.22.19       pnpm: N/A     Relevant packages:       next: 13.3.0       eslint-config-next: 13.3.0       react: 18.2.0       react-dom: 18.2.0

Vercel version

28.18.3

Description

My project uses .env.[development|test|production] files for managing our non-secret environment variables (including our backend base URL, Auth0 url and client id, etc), as recommended in the Next.js docs

These files work fine and are compiled into the app when I run the default scripts (npm run dev, npm run build && npm run start), and I can even specify the environment I want with NODE_ENV=test npm run dev. But when running NODE_ENV=test npx @cloudflare/next-on-pages it compiles in variables from the production environment file.

It looks like I can force a correct build by adding an environment to the build command in package.json (eg. "build": "NODE_ENV=test next build"), but that's not ideal.

Note: for a number of reasons we are using our own CI environment to build the project and then are publishing to pages with wrangler, I haven't tried using the default pages pull-from-git approach.

Reproduction

Minimal example after npm create-next-app@latest

https://github.com/dodrian/pages-next-app

Additional Information

No response

Would you like to help?

• [ ] Would you like to help fixing this bug?

[dario-piotrowicz]

Thank you so very much for the issue and especially the reproduction that's going to be super helpful 🙂👍

[dario-piotrowicz]

dang, this is a bit annoying 😓

We build the application using the vercel CLI, unfortunately they seem to override/hardcode the NODE_ENV env var to 'production' before building the application 😓 https://github.com/vercel/vercel/blob/f774d5f7a2c72e4b6c8fade5d28d939ab9a63135/packages/next/src/index.ts#L429

Feels like we don't have much choice but to update the build script in the package.json as you mentioned (which definitely is not ideal!) 😓

[dario-piotrowicz]

I've opened a discussion there: https://github.com/orgs/vercel/discussions/2012

Let's see if that yields to anything 😓

[sgoodluck]

Ditto -- running into this right now

[meoyawn]

my workaround package.json:

{
    "scripts": {
        "pages-dev": "cp .env.development .env.production && next-on-pages",
        "pages-prod": "cp .env.production.real .env.production && next-on-pages",
    }
}

.gitignore:

.env.production

[cjxe]

my workaround package.json:

{
    "scripts": {
        "pages-dev": "cp .env.development .env.production && next-on-pages",
        "pages-prod": "cp .env.production.real .env.production && next-on-pages",
    }
}

.gitignore:

.env.production

This works, but it is a mess because we have to manually update the env vars in wrangler.toml to match the current env file. It gives me a headache to keep up with so many env files and vars, so much that I am sure I will mess up prod soon.

EDIT: I ended up creating 2 wrangler.toml files:

• dev
• prod

I set up a package.json script:

  "scripts": {
    "setup:dev": "cp .env.development .env && cp .env.development .env.production.local && cp wrangler.toml.development wrangler.toml",
    "setup:prod": "cp .env.production .env && cp .env.production .env.production.local && cp wrangler.toml.production wrangler.toml",
    "next:dev": "pnpm setup:dev && next dev",
    "pages:build": "pnpm next-on-pages",
    "pages:dev": "pnpm setup:dev && pnpm pages:build && pnpm wrangler pages dev",
    "pages:deploy": "pnpm setup:prod && pnpm pages:build && pnpm wrangler pages deploy"
  },

It's somewhat automatic, I will leave it as it is for now.

[matbrgz]

I've opened a discussion there: https://github.com/orgs/vercel/discussions/2012

Let's see if that yields to anything 😓

This link seems broken, any progress here?

[AliOmarTO]

In my case, to make it work, i used the env-cmd package to pass whichever .env.* file I want in my script. This way, you can write your .env files just like how you would in a normal next.js app.

For example:

just install env-cmd with npm install env-cmd