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.

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.

• javascript
• node.js
• reactjs
• openshift
• next.js

1 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)