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.
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With