DefinePlugin is not not working on WebPack@5.89.0

[MANITHIN18]

When we upgraded our React front code to node 20, we also had to upgrade the Webpack from version 4 to 5. After upgrading, the global variables are not getting injected into the code at the run time in the build (dist folder). Here's the webpack config code:

const path = require('path');
const webpack = require('webpack');
const { brand } = process.env;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { constants, ...content } = require(`./src/content/${brand}`);
const appConfig = require(`./config/${brand}.json`);
const theme = require(`@rsa-digital/theme-${brand}`);

module.exports = {
  mode: 'production',
  target: 'node',
  node: {
    __dirname: false
  },
  entry: './src/js/server.js',
  module: {
    rules: [
      {
        test: /\.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader, 'css-loader'
        ]
      },
      {
        test: /\.(eot|otf|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'fonts'
            }
          }
        ]
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images'
            }
          }
        ]
      },
      {
        test: /\.(ico)$/,
        use: [
          {
            loader: 'file-loader?name=[name].[ext]'
          }
        ]
      },
      {
        test: /\.(js|jsx)?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: { compact: false }
      }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'server.js',
    libraryTarget: 'commonjs2',
    globalObject: 'this',
    publicPath: './dist/'
  },
  resolve: {
    modules: [path.resolve(__dirname, './src'), 'node_modules'],
    extensions: ['.js', '.jsx', '.json'],
    alias: {
      'styled-components': path.resolve('./node_modules/styled-components')
    }
  },
  plugins: [
    new MiniCssExtractPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      CONSTANTS: JSON.stringify(constants),
      BRAND: JSON.stringify(brand),
      CONFIG: JSON.stringify(appConfig),
      THEME: JSON.stringify(theme),
      CONTENT: JSON.stringify(content)
    })
  ]
};

So, while running the dist folder build, we are getting the error for CONSTANTS, BRAND, CONFIG, THEME and CONTENT as Undefined.

What do you think the issue could be ? any solutions?

[alexander-akait]

Please provide reproducible test repo, thank you