Webpack 4, process is not defined – Nginx

All of a sudden a project that worked fine on webpack 4 now breaks on all browsers while on dev.

I am using
Node v16.3.0 & npm v8.1.3

The page loads, the terminal gives out no error and it seems to work, the page can be interacted with for a few seconds then it frezees and the console on the browsers throws:

Uncaught ReferenceError: process is not defined

The build still works well for production it’s only breaking on dev.

I have researched and tried everything, changed to different node version use the process plugin, it does not matter always comes back with the same error on the browser console.

This is my webpack.config.js

// Module paths
const path = require('path')
// File System module
const fs = require('fs')
// Main webpack bundler
const webpack = require('webpack')
// Merger for webpack configurations
const merge = require('webpack-merge')
// Created html for bundle
const HtmlPlugin = require('html-webpack-plugin')
// Add Tags
const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin')
// CSS Linter
const StylelintPlugin = require('stylelint-webpack-plugin')
// On screen error console
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin')
// Tidy up plugings after ise
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// Copy folder
const CopyWebpackPlugin = require('copy-webpack-plugin')
// Module loaders
const load = require('./webpack.modules')
// Get metas
const { links, metas } = require('../meta/meta-data')

// Paths
const paths = {
  app: path.join(__dirname, '../../app'),
  dist: path.join(__dirname, '../../public')
}

// Main module
const commonConfig = merge([
  {
    context: paths.app,
    resolve: {
      unsafeCache: true,
      symlinks: false
    },
    output: {
      path: paths.dist,
      pathinfo: true
    },
    plugins: [
      new HtmlPlugin({
        template: `${paths.app}/index.html`,
        inject: true
      }),
      // Style linter
      new StylelintPlugin({
        context: `${paths.app}/styles`,
        syntax: 'scss',
        emitErrors: false,
        configFile: path.resolve(__dirname, 'stylelint.config.js')
      })
    ]
  },
  load.LintJS({
    include: `${paths.app}/scripts/*`,
    options: {
      emitWarning: true,
      failOnWarning: false,
      failOnError: true,
      fix: true,
      cache: true,
      formatter: require('eslint-friendly-formatter'),
      configFile: path.resolve(__dirname, 'eslint.config.js')
    }
  })
])
// Production module
const productionConfig = merge([
  {
    mode: 'production',
    devtool: false,
    stats: {
      assets: true,
      modules: false,
      children: false
    },
    entry: {
      app: paths.app + '/scripts/index.jsx',
      styles: paths.app + '/styles/index.scss'
    },
    output: {
      filename: 'static/scripts/[name].bundle.[contenthash:8].js'
    },
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        maxAsyncRequests: 30,
        maxSize: 100000,
        minSize: 0,
        cacheGroups: {
          defaultVendors: {
            test: /[\/]node_modules[\/]/,
            name(module) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const packageName = module.context.match(
                /[\/]node_modules[\/](.*?)([\/]|$)/
              )[1]
              // npm package names are URL-safe, but some servers don't like @ symbols
              return `npm.${packageName.replace('@', '')}`
            }
          }
        }
      }
    },
    performance: {
      maxEntrypointSize: 470000, // in bytes
      maxAssetSize: 470000, // in bytes
      hints: 'warning' // 'error' or false are valid too
    },
    cache: true,
    plugins: [
      new HtmlWebpackTagsPlugin({ links, metas }),
      new CleanWebpackPlugin(),
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('production')
      }),
      new CopyWebpackPlugin([
        {
          from: `${paths.app}/images/favicon`,
          to: `${paths.dist}/static/images/favicon`
        }
      ])
    ]
  },
  // HTML
  load.Html(true),
  // JS
  load.Scripts({
    include: `${paths.app}/scripts`,
    options: {
      configFile: path.resolve(__dirname, 'babel.config.js'),
      cacheDirectory: true
    }
  }),
  load.MinifyJS({
    extractComments: true,
    cache: true,
    parallel: true,
    sourceMap: false,
    terserOptions: {
      extractComments: 'all',
      parse: { ecma: 8 },
      compress: {
        ecma: 5,
        warnings: false,
        comparisons: false,
        drop_console: true
      },
      mangle: { safari10: true },
      output: {
        ecma: 5,
        comments: false,
        ascii_only: true
      }
    }
  }),
  // CSS
  load.ExtractCSS({
    include: `${paths.app}/styles`,
    options: {
      filename: 'static/styles/[name].min.[contenthash:8].css'
    }
  }),
  load.CSS({
    include: `${paths.app}/node_modules/react-calendar/`
  }),
  load.MinifyCSS({
    options: {
      discardComments: { removeAll: true }
    }
  }),
  // Images
  load.Images({
    include: `${paths.app}/images`,
    options: {
      name: 'static/images/[name].[contenthash:8].[ext]',
      limit: 1000,
      esModule: false
    }
  }),
  load.Fonts({
    include: `${paths.app}/fonts`,
    options: {
      name: 'static/fonts/[name].[contenthash:8].[ext]',
      limit: 5000
    }
  }),
  load.OptimizeImages({
    options: {
      mozjpeg: { progressive: true },
      gifsicle: { interlaced: false },
      optipng: { optimizationLevel: 4 },
      pngquant: { quality: [0.75, 0.9], speed: 3 }
    }
  })
])

// Development module
const developmentConfig = merge([
  {
    mode: 'development',
    entry: [paths.app + '/scripts/index.jsx', paths.app + '/styles/index.scss'],
    cache: true,
    devtool: 'cheap-module-source-map',
    plugins: [
      new HtmlWebpackTagsPlugin({
        links: [
          {
            path: 'data:,',
            attributes: { rel: 'icon' }
          }
        ]
      }),

      new ErrorOverlayPlugin(),
      new CleanWebpackPlugin()
    ],
    resolve: {
      alias: {
        'react-dom': '@hot-loader/react-dom'
      }
    },
    optimization: {
      splitChunks: {
        cacheGroups: {
          default: false
        }
      }
    }
  },
  // Dev server main settings
  load.DevServer({
    host: 'ranks.local',
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        secure: false
      }
    },
    http2: true,
    https: {
      key: fs.readFileSync('/usr/local/etc/nginx/ssl/localhost+3-key.pem'),
      cert: fs.readFileSync('/usr/local/etc/nginx/ssl/localhost+3.pem')
    }
  }),
  // HTML
  load.Html(),
  // JS
  load.Scripts({
    include: `${paths.app}/scripts`,
    options: {
      configFile: path.resolve(__dirname, 'babel.config.js')
    }
  }),
  // CSS
  load.CSS({
    include: `${paths.app}/node_modules/react-calendar/`
  }),
  load.Styles({
    include: `${paths.app}/styles`
  }),
  // Images
  load.Images({
    include: `${paths.app}/images`,
    options: {
      esModule: false,
      limit: 0
    }
  }),
  // Fonts
  load.Fonts({
    include: `${paths.app}/fonts`,
    options: {
      name: `fonts/[name].[hash:8].[ext]`
    }
  })
])

// Merge modules
module.exports = (env) =>
  merge(commonConfig, env === 'dev' ? developmentConfig : productionConfig)

And these are my package.json scripts:

 "scripts": {
    "dev": "webpack-dev-server --config=config/webpack.config.js --env dev --color",
    "build": "webpack --config=config/webpack.config.js --mode=production --progress"
  },