My .env variables just don't work!

Bug report

every .env variable fails to show up even by using process.env.VARIABLE clause.

To Reproduce

• next.config.js:

const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass')
const { parsed: localEnv } = require('dotenv').config()
const webpack = require('webpack')

module.exports = withSass({
  webpack(config) {
    config.plugins.push(new webpack.EnvironmentPlugin(localEnv))
    config.plugins.push(
      new webpack.ProvidePlugin({
          '$': 'jquery',
          'jQuery': 'jquery',
      })
    )
    return config
  }
})

• constants.js:

export const BACKEND_SERVER = process.env.BACKEND_SERVER
export const PROD_DOMAIN = process.env.PROD_DOMAIN
export const FB_LOGIN_APP_ID = process.env.FB_LOGIN_APP_ID
export const GOOGLE_LOGIN_APP_ID = process.env.GOOGLE_LOGIN_APP_ID
export const GOOGLE_LOGIN_APP_SECRET = process.env.GOOGLE_LOGIN_APP_SECRET
export const FB_LOGIN_APP_VERSION = process.env.FB_LOGIN_APP_VERSION
export const DEV_DOMAIN = process.env.DEV_DOMAIN
export const ENDPOINT = process.env.ENDPOINT
export const GA_TRACKING_ID = process.env.GA_TRACKING_ID
export const CLOUDINARY_USERNAME = process.env.CLOUDINARY_USERNAME

• App.js

import { BACKEND_SERVER } from './constants'
export const client = new ApolloClient({
  uri: `${BACKEND_SERVER}/graphql`,
  request: operation => {
    operation.setContext({
      fetchOptions: {
        credentials: 'include',
      }
    })
  }
})

Expected behavior

The above example should make env variable work nicely, but just doesn’t!

System information

• OS: macOS 18.0.0
• Browser (if applies) Chrome Latest
• Version of Next.js: v7.0.2

Additional context

Please help, trying to solve the bug since two days!

[ijjk]

You should be able to upgrade to v8 from v7.0.2 to do so you do yarn add next@latest react@latest react-dom@latest

To have better compatibility with Now and Heroku I would use process.env to access the values. So in development you can use dotenv to load your values and then in production they will be added to the environment by configuring them on the platform you are using. Here are the docs for configuring them on Now.

So your next.config.js would look like this:

require('dotenv').config()
const withCSS = require('@zeit/next-css');
const withSass = require('@zeit/next-sass')
const webpack = require('webpack')

module.exports = withSass({
  webpack(config) {
    config.plugins.push(
      new webpack.ProvidePlugin({
          '$': 'jquery',
          'jQuery': 'jquery',
      })
    )
    return config
  },
  env: {
    'MY_SECRET_KEY': process.env.MY_SECRET_KEY
  }
})

This will allow you to use process.env.MY_SECRET_KEY in your built files. Note: if you change these values you will need to run a new build.

[ijjk]

Hi, have you tried using the built-in support for inlining values during build? Here are the docs in case you missed them.