Upgrade to Node 20, Webpack 5, npm audit fixes

[adriancofie]

Description

This ticket is to upgrade the version of node to a supported version, update webpack, and resolve any moderate or above vulnerabilities related to this repository.

This should entail the following:

Update Node to the latest LTS v20 (lts/iron)
Update Webpack to v5
Update any other required dependencies to resolve aforementioned security issues

Steps:

Node

• Install and use node 20 locally

    nvm install 20
    nvm use 20

• Update .nvmrc to contain lts/iron and update the allowed version ins package.json

Webpack et al.

• Extract the jest config from package.json to jest.config.js
  Note: This allows for more modularity and lets us have dynamic paths

• Run the following:

      npm install webpack@latest --save-dev

• Run the following:

	npm install —save-dev eslint-webpack-plugin  @babel/eslint-parser  @babel/plugin-proposal-private-property-in-object
	html-webpack-plugin  buffer stream-http process https-browserify url

npm uninstall eslint-loader babel-eslint

• Webpack 5 does not polyfill Node.js core modules by default anymore so remove the following from the webpack config:

		node: {
		  module: 'empty',
		  dgram: 'empty',
		  dns: 'mock',
		  fs: 'empty',
		  http2: 'empty',
		  net: 'empty',
		  tls: 'empty',
		  child_process: 'empty',
		}

• And add the following to the resolve key in the webpack config

				fallback: {
					"http": require.resolve("stream-http"),
					"https": require.resolve('https-browserify'),
					"buffer": require.resolve('buffer'),
					"url": require.resolve("url"),
				},
		

• Add the following Buffer plugin to the list of plugins in the webpack config

					Buffer: ['buffer', 'Buffer'],
				})

• Update the webpack hashing function from the insecure md4 to xxhash64

• Add the following lineconst __webpack_base_uri__ = 'http://localhost:3000';

• Update loader notation in webpack config
  Usage of loader notation 'style-loader!css-loader' is deprecated and replaced with
  [{loader: ‘style-loader’}, {loader: ‘css-loader’}]

• Update the import statement for the ManifestPlugin to the following and update the references:

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

• Add the required absoluteRuntime key to babel.config.js

• Replace the deprecated babel-eslint package with @babel/eslint-parser

• Replace eslint loader with eslint-webpack-plugin

Import the new plugin

const ESLintPlugin = require('eslint-webpack-plugin');

Add the plugin to the plugin list in webpack.config.js

		plugins: [
			new ESLintPlugin( {
	extensions: [`js`, `jsx`, `cjs`,`mjs`,`ts`,`tsx`],
	exclude:[  `/node_modules/`, ...paths.appExcludeFromBuild],
	cache: true,
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
ignore: true,
useEslintrc: true,}),

• Update buildAxiosRequest.test.js to set the addapter type to http

	const axiosInstance = axios.create({
		timeout: 10000,
		adapter: 'http',
	});

• Update App.test.js to remove the following:

axios.defaults.adapter = require('axios/lib/adapters/http');

• Run the following:

    npm audit fix --force

• Run the following

	npm run lint:fix

Requirements:

In the commits comment take note of which packages were updated to a new major version, and any other pertinent information or steps taken to resolve issues encountered.

Acceptance Criteria:

All major and above node/NPM vulnerabilities are resolved.
Node is at LTS v20
Webpack is at v5