fix webpack node last version pandora_enterprise#9941

visual_console_client/package.json

@@ -30,24 +30,24 @@
     "@typescript-eslint/eslint-plugin": "^1.13.0",
     "@typescript-eslint/parser": "^1.13.0",
     "awesome-typescript-loader": "^5.2.1",
-    "clean-webpack-plugin": "^2.0.2",
-    "css-loader": "^2.1.1",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.7.3",
     "d3-shape": "^1.3.7",
     "eslint": "^5.16.0",
     "eslint-config-prettier": "^4.3.0",
     "eslint-plugin-prettier": "^3.4.0",
-    "file-loader": "^3.0.1",
-    "jest": "^24.9.0",
-    "mini-css-extract-plugin": "^0.5.0",
+    "file-loader": "^6.2.0",
+    "jest": "^29.3.1",
+    "mini-css-extract-plugin": "^2.7.2",
     "npm-watch": "^0.11.0",
     "postcss-loader": "^3.0.0",
     "prettier": "^1.19.1",
-    "ts-jest": "^24.3.0",
-    "typescript": "^3.9.9",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.46.0",
-    "webpack-cli": "^3.3.12",
-    "webpack-dev-server": "^3.11.2"
+    "ts-jest": "^29.0.3",
+    "typescript": "^4.9.4",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.11.1"
   },
   "browserslist": [
     "> 1%",

visual_console_client/src/VisualConsole.ts

@@ -718,6 +718,8 @@ export default class VisualConsole {
         itemInstance.onResizeFinished(context.handleElementResizementFinished);
       }
 
+      console.log(context.containerRef);
+      console.log(itemInstance.elementRef);
       // Add the item to the DOM.
       context.containerRef.append(itemInstance.elementRef);
       return itemInstance;

visual_console_client/src/items/Odometer.ts

@@ -223,16 +223,10 @@ export default class Odometer extends Item<OdometerProps> {
 
     let script = document.createElement("script");
     script.type = "text/javascript";
-    script.onload = function() {
+    script.onload = () => {
       odometerB.style.transform = `rotate(${rotate}turn)`;
     };
-
-    if (typeof this.props.metaconsoleId !== "undefined") {
-      script.src = "./../../include/javascript/pandora_alerts.js";
-    } else {
-      script.src = "./include/javascript/pandora_alerts.js";
-    }
-
+    script.src = `${document.dir} /pandora_console/include/javascript/pandora_alerts.js`;
     odometerA.appendChild(h1);
     odometerA.appendChild(h2);
     odometerContainer.appendChild(odometerB);
@@ -325,9 +319,7 @@ export default class Odometer extends Item<OdometerProps> {
   }
 
   private getCoords(percent: number, radio: number): string {
-    if (this.props.minMaxValue === "") {
-      percent = percent;
-    } else {
+    if (this.props.minMaxValue !== "") {
       const minMax = JSON.parse(this.props.minMaxValue);
       if (minMax["min"] === percent) {
         percent = 0;

visual_console_client/webpack.config.js

@@ -1,8 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require("path");
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const CleanWebpackPlugin = require("clean-webpack-plugin");
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
 const dev = process.env.NODE_ENV !== "production";
@@ -21,7 +19,9 @@ module.exports = {
   output: {
     path: buildPath, // The files will be created here.
     // filename: dev ? "vc.[name].min.js" : "vc.[name].[chunkhash:8].min.js"
-    filename: "vc.[name].min.js"
+    filename: "vc.[name].min.js",
+    assetModuleFilename: "[name][ext]",
+    clean: true
   },
   devtool: "source-map",
   resolve: {
@@ -32,18 +32,18 @@ module.exports = {
       // Loader for the Typescript compiler.
       {
         test: /\.ts$/,
-        loader: "awesome-typescript-loader"
+        use: [{ loader: "awesome-typescript-loader" }]
       },
       // This loader builds a main CSS file from all the CSS imports across the files.
       {
         test: /\.css$/,
-        loader: [
+        use: [
           // https://github.com/webpack-contrib/mini-css-extract-plugin
           {
             loader: MiniCssExtractPlugin.loader,
             options: {
-              hot: true, // if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config
-              reloadAll: true // when desperation kicks in - this is a brute force HMR flag
+              //hot: true // if you want HMR - we try to automatically inject hot reloading but if it's not working, add it to the config
+              //reloadAll: true // when desperation kicks in - this is a brute force HMR flag
             }
           },
           // https://webpack.js.org/loaders/css-loader
@@ -52,20 +52,6 @@ module.exports = {
             options: {
               sourceMap: true
             }
-          },
-          // To post process CSS and add some things like prefixes to the rules. e.g.: -webkit-...
-          // https://github.com/postcss/postcss-loader
-          {
-            loader: "postcss-loader",
-            options: {
-              plugins: () => [
-                // Moved to package.json (?)
-                // // To improve the support for old browsers.
-                // require("autoprefixer")({
-                //   browsers: ["> 1%", "last 2 versions"]
-                // })
-              ]
-            }
           }
         ]
       },
@@ -74,27 +60,20 @@ module.exports = {
       // https://webpack.js.org/loaders/url-loader
       {
         test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
-        loader: "url-loader",
-        options: {
-          limit: 10000,
-          // name: "[name].[hash:8].[ext]"
-          name: "[name].[ext]"
+        type: "asset",
+        generator: {
+          filename: "[name][ext]"
         }
       }
     ]
   },
   plugins: [
-    // This plugin will remove all files inside Webpack's output.path directory,
-    // as well as all unused webpack assets after every successful rebuild.
-    new CleanWebpackPlugin(),
     // Options for the plugin which extract the CSS files to build a main file.
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // both options are optional
       // filename: dev ? "vc.[name].css" : "vc.[name].[contenthash:8].css",
-      filename: "vc.[name].css",
-      // Disable to remove warnings about conflicting order between imports.
-      orderWarning: true
+      filename: "vc.[name].css"
     })
   ],
   // Static server which runs the playground on npm start.