Webpack 4 -> 5

package.json

@@ -30,6 +30,7 @@
         "i18next": "^21.8.9",
         "i18next-http-backend": "^1.4.1",
         "i18next-multiload-backend-adapter": "^1.0.0",
+        "path-browserify": "^1.0.1",
         "qrcode.react": "^1.0.1",
         "react": "^16.14.0",
         "react-chartjs-2": "^4.2.0",
@@ -77,6 +78,7 @@
         "@types/events": "^3.0.0",
         "@types/jest": "^28.1.3",
         "@types/node": "^22.0.0",
+        "@types/path-browserify": "^1.0.3",
         "@types/qrcode.react": "^1.0.1",
         "@types/react": "^16.14.0",
         "@types/react-copy-to-clipboard": "^4.3.0",
@@ -87,7 +89,7 @@
         "@types/react-transition-group": "^4.4.0",
         "@types/styled-components": "5.1.7",
         "@types/uuid": "^3.4.5",
-        "@types/webpack-env": "^1.15.2",
+        "@types/webpack-env": "^1.18.8",
         "@types/yup": "^0.29.3",
         "@typescript-eslint/eslint-plugin": "^5",
         "@typescript-eslint/parser": "^5",
@@ -104,7 +106,7 @@
         "eslint-plugin-prettier": "^4",
         "eslint-plugin-react": "^7",
         "eslint-plugin-react-hooks": "^4",
-        "fork-ts-checker-webpack-plugin": "^6",
+        "fork-ts-checker-webpack-plugin": "^9.1.0",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^28.1.1",
         "postcss": "^8.4.14",
@@ -117,16 +119,15 @@
         "source-map-loader": "^1.1.3",
         "style-loader": "^2.0.0",
         "svg-url-loader": "^7.1.1",
-        "terser-webpack-plugin": "^4.2.3",
+        "terser-webpack-plugin": "^5.3.14",
         "ts-essentials": "^9.1.2",
         "ts-jest": "^28.0.5",
         "twin.macro": "^2.8.2",
         "typescript": "~5.1.0",
-        "webpack": "^4.43.0",
+        "webpack": "^5.103.0",
-        "webpack-assets-manifest": "^3.1.1",
+        "webpack-assets-manifest": "^6.4.0",
-        "webpack-bundle-analyzer": "^3.8.0",
+        "webpack-cli": "^6.0.1",
-        "webpack-cli": "^3.3.12",
+        "webpack-dev-server": "^5.2.2",
-        "webpack-dev-server": "^3.11.0",
         "yarn-deduplicate": "^1.1.1"
     },
     "scripts": {
@@ -135,7 +136,7 @@
         "lint": "eslint ./resources/scripts/**/*.{ts,tsx} --ext .ts,.tsx",
         "watch": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
         "build": "cross-env NODE_ENV=development ./node_modules/.bin/webpack --progress",
-        "build:production": "yarn run clean && cross-env NODE_ENV=production ./node_modules/.bin/webpack --mode production",
+        "build:production": "yarn run clean && cross-env NODE_ENV=production NODE_OPTIONS=--openssl-legacy-provider ./node_modules/.bin/webpack --mode production",
         "serve": "yarn run clean && cross-env WEBPACK_PUBLIC_PATH=/webpack@hmr/ NODE_ENV=development webpack-dev-server --host 0.0.0.0 --port 8080 --public https://pterodactyl.test --hot"
     },
     "browserslist": [

resources/scripts/components/server/files/FileDropdownMenu.tsx

@@ -14,7 +14,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import RenameFileModal from '@/components/server/files/RenameFileModal';
 import { ServerContext } from '@/state/server';
-import { join } from 'path';
+import { join } from 'path-browserify';
 import deleteFiles from '@/api/server/files/deleteFiles';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 import copyFile from '@/api/server/files/copyFile';

resources/scripts/components/server/files/FileEditContainer.tsx

@@ -18,7 +18,7 @@ import useFlash from '@/plugins/useFlash';
 import { ServerContext } from '@/state/server';
 import ErrorBoundary from '@/components/elements/ErrorBoundary';
 import { encodePathSegments, hashToPath } from '@/helpers';
-import { dirname } from 'path';
+import { dirname } from 'path-browserify';
 import CodemirrorEditor from '@/components/elements/CodemirrorEditor';
 
 export default () => {

resources/scripts/components/server/files/FileNameModal.tsx

@@ -4,7 +4,7 @@ import { Form, Formik, FormikHelpers } from 'formik';
 import { object, string } from 'yup';
 import Field from '@/components/elements/Field';
 import { ServerContext } from '@/state/server';
-import { join } from 'path';
+import { join } from 'path-browserify';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
 

resources/scripts/components/server/files/FileObjectRow.tsx

@@ -11,7 +11,7 @@ import tw from 'twin.macro';
 import isEqual from 'react-fast-compare';
 import SelectFileCheckbox from '@/components/server/files/SelectFileCheckbox';
 import { usePermissions } from '@/plugins/usePermissions';
-import { join } from 'path';
+import { join } from 'path-browserify';
 import { bytesToString } from '@/lib/formatters';
 import styles from './style.module.css';
 

resources/scripts/components/server/files/NewDirectoryButton.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
 import { Form, Formik, FormikHelpers } from 'formik';
 import Field from '@/components/elements/Field';
-import { join } from 'path';
+import { join } from 'path-browserify';
 import { object, string } from 'yup';
 import createDirectory from '@/api/server/files/createDirectory';
 import tw from 'twin.macro';

resources/scripts/components/server/files/RenameFileModal.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import { Form, Formik, FormikHelpers } from 'formik';
 import Field from '@/components/elements/Field';
-import { join } from 'path';
+import { join } from 'path-browserify';
 import renameFiles from '@/api/server/files/renameFiles';
 import { ServerContext } from '@/state/server';
 import tw from 'twin.macro';

webpack.config.js

@@ -1,16 +1,15 @@
-const path = require('path');
+const path = require('node:path');
 const webpack = require('webpack');
-const AssetsManifestPlugin = require('webpack-assets-manifest');
+const { WebpackAssetsManifest } = require('webpack-assets-manifest');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 const isProduction = process.env.NODE_ENV === 'production';
 
 module.exports = {
     cache: true,
     target: 'web',
-    mode: process.env.NODE_ENV,
+    mode: isProduction ? 'production' : 'development',
     devtool: isProduction ? false : (process.env.DEVTOOL || 'eval-source-map'),
     performance: {
         hints: false,
@@ -96,11 +95,11 @@ module.exports = {
     },
     plugins: [
         new webpack.EnvironmentPlugin({
-            NODE_ENV: 'development',
+            NODE_ENV: process.env.NODE_ENV || 'development',
             DEBUG: process.env.NODE_ENV !== 'production',
             WEBPACK_BUILD_HASH: Date.now().toString(16),
         }),
-        new AssetsManifestPlugin({ writeToDisk: true, publicPath: true, integrity: true, integrityHashes: ['sha384'] }),
+        new WebpackAssetsManifest({ writeToDisk: true, publicPath: true, integrity: true, integrityHashes: ['sha384'] }),
         new ForkTsCheckerWebpackPlugin({
             typescript: {
                 mode: 'write-references',
@@ -126,7 +125,6 @@ module.exports = {
         minimize: isProduction,
         minimizer: [
             new TerserPlugin({
-                cache: isProduction,
                 parallel: true,
                 extractComments: false,
                 terserOptions: {