update packages / fixed eslint

.eslintrc

@@ -1,6 +1,6 @@
 {
   "root": true,
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "plugins": [
     "babel",
     "react",
@@ -40,7 +40,7 @@
     "arrow-parens": "off",
     "dot-notation": "off",
     "eqeqeq": "off",
-    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["./webpack.config.babel.js"]}],
+    "import/no-extraneous-dependencies": ["error", {"devDependencies": ["./webpack.config.js"]}],
     "indent": ["error", 2, {
       "SwitchCase": 1,
       "MemberExpression": "off"

babel.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+    presets: [
+        '@babel/preset-typescript',
+        ['@babel/preset-env', { loose: true }],
+        '@babel/preset-react',
+    ],
+    plugins: [
+        '@babel/plugin-transform-runtime',
+        '@babel/plugin-proposal-object-rest-spread',
+        '@babel/plugin-syntax-dynamic-import',
+        ['@babel/plugin-proposal-decorators', { legacy: true }],
+        ['@babel/plugin-proposal-class-properties', { loose: true }],
+        ['@babel/plugin-transform-computed-properties',  { loose: true }],
+    ],
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chaoticbackup",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Chaotic Backup",
   "scripts": {
     "start": "webpack-cli serve --mode development --env development",
@@ -9,6 +9,9 @@
     "lint:fix": "tsc --noEmit && eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "test": "cross-env TS_NODE_COMPILER_OPTIONS='{ \"module\": \"commonjs\" }' mocha -r ts-node/register -r ignore-styles -r jsdom-global/register src/**/*.spec.ts"
   },
+  "engines": {
+    "node": ">=18.2.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/chaoticbackup/chaoticbackup.github.io.git"
@@ -35,13 +38,14 @@
     "react-process-string": "^1.2.0",
     "react-router": "^6.2.1",
     "react-router-dom": "^6.16.0",
-    "tone": "^14.7.77",
+    "tone": "^15.0.4",
     "universal-cookie": "^6.1.1",
     "whatwg-fetch": "^3.6.19"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.0",
     "@babel/core": "^7.23.2",
+    "@babel/eslint-parser": "^7.24.8",
     "@babel/node": "^7.22.19",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-proposal-decorators": "^7.23.2",
@@ -60,16 +64,16 @@
     "@types/mocha": "^10.0.2",
     "@types/react": "^16.14.49",
     "@types/react-dom": "^16.9.20",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^5.62.0",
+    "@typescript-eslint/parser": "^7.17.0",
-    "babel-eslint": "^10.1.0",
+    "ajv": "^8.12.0",
     "babel-loader": "^9.1.3",
     "chai": "^4.3.10",
     "clean-webpack-plugin": "^4.0.0",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.8.1",
+    "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^5.0.1",
+    "css-minimizer-webpack-plugin": "^7.0.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-promise": "^6.1.1",
@@ -84,17 +88,14 @@
     "mocha": "^10.2.0",
     "postcss": "^8.4.31",
     "sass": "^1.69.3",
-    "sass-loader": "^13.3.2",
+    "sass-loader": "^15.0.0",
-    "style-loader": "^3.3.3",
+    "style-loader": "^4.0.0",
     "terser-webpack-plugin": "^5.3.9",
     "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^5.0.4"
-  },
-  "peerDependencies": {
-    "ajv": "^8.12.0"
   },
   "overrides": {
     "semver": "^7.5.3"

tsconfig.json

@@ -52,6 +52,5 @@
   ],
   "exclude": [
     "build",
-    "**/*.spec.ts"
   ]
 }

webpack.config.js

@@ -33,7 +33,13 @@ module.exports = (env, argv) => {
         publicPath: '/public',
         watch: true
       },
-      historyApiFallback: true
+      historyApiFallback: true,
+      client: {
+        overlay: {
+          errors: true,
+          warnings: false,
+        },
+      }
     },
 
     output: {
@@ -93,21 +99,8 @@ module.exports = (env, argv) => {
         {
           test: /\.(js|ts)x?$/,
           exclude: /node_modules/,
-          loader: 'babel-loader',
+          use: {
-          options: {
+            loader: 'babel-loader',
-            presets: [
-              '@babel/typescript',
-              ['@babel/preset-env', { loose: true }],
-              '@babel/preset-react',
-            ],
-            plugins: [
-              '@babel/plugin-transform-runtime',
-              '@babel/plugin-proposal-object-rest-spread',
-              '@babel/plugin-syntax-dynamic-import',
-              ['@babel/plugin-proposal-decorators', { legacy: true }],
-              ['@babel/plugin-proposal-class-properties', { loose: true }],
-              ['@babel/plugin-transform-computed-properties',  { loose: true }],
-            ],
           },
         },
         {