with-dotenv not working when client side rendering process.env[const]

[pkellner]

Bug report

Describe the bug

in with-dotenv example, when modifying the code to run client side (by adding a route to /about and back to / again), process.env["TEST"] works but const str="TEST;process.env[str] return undefined.

A clear and concise description of what the bug is.
process.env behaves differently when a constant is passed as an indexer versus hard coding that constant

To Reproduce

modifications made to with-dotenv and placed in this repo: https://github.com/pkellner/with-dotenv-bug
Going back and forth between about and home page shows the problem. On static page load of home, the environmental variable outputs as expected, but on linking to that page, undefined is returned.

Steps to reproduce the behavior, please provide code snippets or a repository:
download https://github.com/pkellner/with-dotenv-bug
npm i {make sure nasty bug stopping build from working is fixed https://t.co/VzjGl9JjGF }
npm run dev
go back and forth between / and /about

Expected behavior

should show correct value in all three outputs both server and client side rendering

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: macos and windows
• Browser chrome
• Version of Next.js:7.02

Additional context

Add any other context about the problem here.

[Ephem]

The dotenv-webpack-plugin currently does not support accessing a variable dynamically like you are trying to do. See this issue and the related one for details.

This has to do with how the dotenv-webpack-plugin works. It inlines all env-variables at build time with DefinePlugin and does not resolve dynamic ones to avoid leaking sensitive values. The reason it works serverside is because the real process.env is available there. :)

I haven't tried them myself, but the Readme in the example mentions trying out these two if you need runtime support:

• next-runtime-dotenv
• Example with-universal-configuration-runtime

I hope that helps!

[timneutkens]

Great explanation @Ephem! Probably also good to note that it's best to start using https://github.com/zeit/next.js#build-time-configuration when Next.js 8 is released 👍