Upgrade Node 14 to Node 16

Upgrade Node from 14 to 16 and associated packages and WebPack config

Dockerfile

@@ -2,6 +2,7 @@ FROM ubuntu:21.04
 MAINTAINER Piero Toffanin <pt@masseranolabs.com>
 
 ARG TEST_BUILD
+ARG DEBIAN_FRONTEND=noninteractive
 ENV PYTHONUNBUFFERED 1
 ENV PYTHONPATH $PYTHONPATH:/webodm
 ENV PROJ_LIB=/usr/share/proj
@@ -13,9 +14,13 @@ WORKDIR /webodm
 # Use old-releases for 21.04
 RUN printf "deb http://old-releases.ubuntu.com/ubuntu/ hirsute main restricted\ndeb http://old-releases.ubuntu.com/ubuntu/ hirsute-updates main restricted\ndeb http://old-releases.ubuntu.com/ubuntu/ hirsute universe\ndeb http://old-releases.ubuntu.com/ubuntu/ hirsute-updates universe\ndeb http://old-releases.ubuntu.com/ubuntu/ hirsute multiverse\ndeb http://old-releases.ubuntu.com/ubuntu/ hirsute-updates multiverse\ndeb http://old-releases.ubuntu.com/ubuntu/ hirsute-backports main restricted universe multiverse" > /etc/apt/sources.list
 
-# Install Node.js
+# Install Node.js using new Node install method
 RUN apt-get -qq update && apt-get -qq install -y --no-install-recommends wget curl && \
-    wget --no-check-certificate https://deb.nodesource.com/setup_14.x -O /tmp/node.sh && bash /tmp/node.sh && \
+    apt-get install -y ca-certificates gnupg && \
+    mkdir -p /etc/apt/keyrings && \
+    curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg && \
+    NODE_MAJOR=16 && \
+    echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | tee /etc/apt/sources.list.d/nodesource.list && \
     apt-get -qq update && apt-get -qq install -y nodejs && \
     # Install Python3, GDAL, PDAL, nginx, letsencrypt, psql
     apt-get -qq update && apt-get -qq install -y --no-install-recommends python3 python3-pip python3-setuptools python3-wheel git g++ python3-dev python2.7-dev libpq-dev binutils libproj-dev gdal-bin pdal libgdal-dev python3-gdal nginx certbot gettext-base cron postgresql-client-13 gettext tzdata && \

app/plugins/templates/webpack.config.js.tmpl

@@ -6,7 +6,7 @@ process.env.NODE_PATH = webodmRoot + "node_modules";
 require("module").Module._initPaths();
 
 let path = require("path");
-let ExtractTextPlugin = require('extract-text-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = {
   mode: 'production',
@@ -21,8 +21,9 @@ module.exports = {
   },
 
   plugins: [
-    new ExtractTextPlugin('[name].css', {
-        allChunks: true
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css'
     })
   ],
 
@@ -34,7 +35,7 @@ module.exports = {
         use: [
           {
             loader: 'babel-loader',
-            query: {
+            options: {
               plugins: [
                  '@babel/syntax-class-properties',
                  '@babel/proposal-class-properties'
@@ -49,22 +50,21 @@ module.exports = {
       },
       {
         test: /\.s?css$$/,
-        use: ExtractTextPlugin.extract({
-          use: [
-            { loader: 'css-loader' },
-            {
-                loader: 'sass-loader',
-                options: {
-                    implementation: require("sass")
-                }
-            }
-          ]
-        })
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'sass-loader',
+        ]
       },
-      {
+{
         test: /\.(png|jpg|jpeg|svg)/,
-        loader: "url-loader?limit=100000"
-      }
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 100000,
+          },
+        },
+      },
     ]
   },
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "WebODM",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "description": "User-friendly, extendable application and API for processing aerial imagery.",
   "main": "index.js",
   "scripts": {
@@ -37,7 +37,6 @@
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.15.1",
     "exifr": "^6.0.0",
-    "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "fbemitter": "^2.1.1",
     "file-loader": "^0.9.0",
     "file-saver": "^2.0.2",
@@ -56,7 +55,7 @@
     "react-dom": "^16.4.0",
     "react-router": "^4.1.1",
     "react-router-dom": "^4.1.1",
-    "react-test-renderer": "^15.6.1",
+    "react-test-renderer": "^16.14.0",
     "regenerator-runtime": "^0.11.0",
     "sass": "^1.22.7",
     "sass-loader": "^7.1.0",
@@ -68,7 +67,8 @@
     "uglifyjs-webpack-plugin": "^1.2.7",
     "url-loader": "^0.5.7",
     "webpack": "^4.16.2",
-    "webpack-bundle-tracker": "0.0.93",
-    "webpack-livereload-plugin": "^2.1.1"
+    "webpack-bundle-tracker": "0.4.3",
+    "webpack-livereload-plugin": "3.0.2",
+    "mini-css-extract-plugin": "1.6.2"
   }
 }

webpack.config.js

@@ -1,16 +1,17 @@
 const webpack = require('webpack');
 let path = require("path");
 let BundleTracker = require('webpack-bundle-tracker');
-let ExtractTextPlugin = require('extract-text-webpack-plugin');
+let MiniCssExtractPlugin = require("mini-css-extract-plugin");
 let LiveReloadPlugin = require('webpack-livereload-plugin');
 
+
 const mode = process.argv.indexOf("production") !== -1 ? "production" : "development";
 console.log(`Webpack mode: ${mode}`);
 
 module.exports = {
   mode,
   context: __dirname,
-  
+
   entry: {
     main: ['./app/static/app/js/main.jsx'],
     Console: ['./app/static/app/js/Console.jsx'],
@@ -20,30 +21,34 @@ module.exports = {
   },
 
   output: {
-      path: path.join(__dirname, './app/static/app/bundles/'),
-      filename: "[name]-[hash].js"
+    path: path.join(__dirname, './app/static/app/bundles/'),
+    filename: "[name]-[hash].js",
   },
 
   plugins: [
-    new LiveReloadPlugin({appendScriptTag: true}),
-    new BundleTracker({filename: './webpack-stats.json'}),
-    new ExtractTextPlugin('css/[name]-[hash].css', {
-        allChunks: true
-    })
+    new LiveReloadPlugin({ appendScriptTag: true }),
+    new BundleTracker({
+      filename: 'webpack-stats.json',
+      path: path.join(__dirname, './'),
+    }),
+    new MiniCssExtractPlugin({
+      filename: "[name]-[hash].css",
+      chunkFilename: "[id].css"
+    }),
   ],
 
   module: {
     rules: [
-      { 
-        test: /\.jsx?$/, 
-        exclude: /(node_modules|bower_components)/, 
+      {
+        test: /\.jsx?$/,
+        exclude: /(node_modules|bower_components)/,
         use: [
           {
             loader: 'babel-loader',
-            query: {
+            options: {
               plugins: [
-                 '@babel/syntax-class-properties',
-                 '@babel/proposal-class-properties'
+                '@babel/syntax-class-properties',
+                '@babel/proposal-class-properties'
               ],
               presets: [
                 '@babel/preset-env',
@@ -55,21 +60,20 @@ module.exports = {
       },
       {
         test: /\.s?css$/,
-        use: ExtractTextPlugin.extract({
-          use: [
-            { loader: 'css-loader' },
-            {
-                loader: 'sass-loader',
-                options: {
-                    implementation: require("sass")
-                }
-            }
-          ]
-        })
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          "sass-loader",
+        ]
       },
       {
         test: /\.(png|jpg|jpeg|svg)/,
-        loader: "url-loader?limit=100000"
+        use: {
+          loader: 'url-loader',
+          options: {
+            limit: 100000,
+          },
+        },
       },
       {
         // shaders