publicRuntimeConfig in next.config.js is always undefined in prod/staging

Question

I am deploying a node project that uses next.js to openshift where I set the environment variable MY_ENV. I have added the publicRuntimeConfig configuration to next.config.js to access it client side. It works in my local but when its containerized and deployed publicRuntimeConfig is undefined.

Here is my configuration from next.config.js

module.exports = {
  publicRuntimeConfig: { // Will be available on both server and client
      isProd: process.env.MY_ENV ? process.env.MY_ENV.includes('prod'): false,
      isStaging: process.env.MY_ENV ? process.env.MY_ENV.includes('staging') : false
    },
  webpack: (config, { dev }) => {
    const eslintRule = {
      test: /\.js$/,
      enforce: 'pre',
      exclude: /node_modules/,
      loader: 'eslint-loader',
      options: {
        emitWarning: dev,
      },
    };
    const cssRule = {
      test: /\.css$/,
      use: {
        loader: 'css-loader',
        options: {
          sourceMap: false,
          minimize: true,
        },
      },
    };

    config.node = {
      fs: 'empty'
    };

    config.module.rules.push(eslintRule);
    config.module.rules.push(cssRule);
    return config;
  }
};

This is how I am trying to get the publicRuntimeConfig on my pages.

import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();

console.log(publicRuntimeConfig.isProd); //publicRuntimeConfig is undefined here. 

Any help is appreciated.

UPDATE/FIX

publicRuntimeConfig was undefined in higher environments because it was not part of the package that was getting deployed.

Set

Answer 1

Does undefined Error occur in pages?

what about try to getConfig from next/config ?

import getConfig from 'next/config';

const getNodeEnv = () => {
  const { publicRuntimeConfig } = getConfig();

  const isProd = publicRuntimeConfig.isProd || false;
  const isStaging = publicRuntimeConfig. isStaging || false;

  return { isProd, isStaging }
};

const env = getNodeEnv()

console.log(env)

Allometry

yes it happens on pages and i added to the question how I am using it. Not sure if there is a difference in how i am using it vs what you have here. for some reason if i set the env variable in my local it all works fine. – Set

I can't find diffrence with you. Actually your code works well for me. I use next build command defore deploy for production. After build I use pm2 start with my custom file server.js but just next start it works. – Allometry

thats what i am confused about. i use the same and it build fine in my local. I am thinking that i might be missing the file in my higher env. Is there a difference between your answer and how I am getting the publicRuntimeConfig – Set

please check and find difference from my git. github.com/kkangil/nextjs-mobx-boilerplate I'm using pm2 ecosystem. process.env variables are set from ecosystem.config.js and I separated the getNodeEnv function in utils/env. Finally I use env called from getNodeEnv (pages/_error) – Allometry

Thanks man. I think the part of the problem was the file not being included in the package that was getting deployed into higher environment – Set