Update webpack to v5 (#6844)

* upgrade webpack info

* cleanup eslint findings

* fix eslint formatter stylish error

* lazy is invalid option for webpack dev middleware

* upgrade webpack to 5.x

* remove unsupported terser option

* fix missing process polyfill dependency

* try alternate proces fix

* fix css image reference

* add statements to import missing css files to index.html

* TerserPlugin no longer required

* add missing css links

* remove terser

Co-authored-by: Jeremy Cunningham <jpcunningh@gmail.com>
Co-authored-by: Sulka Haro <sulka@sulka.net>

lib/client/adminnotifiesclient.js

@@ -66,6 +66,7 @@ function init (client, $) {
     if (messages && messages.length > 0) {
       html += '<p><b>' + translate('You have administration messages') + '</b></p>';
       for(var i = 0 ; i < messages.length; i++) {
+        /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
         var m = messages[i];
         const ago = Math.round((Date.now() - m.lastRecorded) / 60000);
         html += wrapmessage(translate(m.title), translate(m.message), m.count, ago, m.persistent);

lib/client/boluscalc.js

@@ -252,6 +252,7 @@ function init (client, $) {
       var html = '<table  style="float:right;margin-right:20px;font-size:12px">';
       var carbs = 0;
       for (var fi = 0; fi < record.foods.length; fi++) {
+        /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
         var f = record.foods[fi];
         carbs += f.carbs * f.portions;
         html += '<tr>';
@@ -426,6 +427,7 @@ function init (client, $) {
     if (record.foods.length) {
       var gisum = 0;
       for (var fi = 0; fi < record.foods.length; fi++) {
+        /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
         var f = record.foods[fi];
         record.carbs += f.carbs * f.portions;
         gisum += f.carbs * f.portions * f.gi;
@@ -576,7 +578,7 @@ function init (client, $) {
       foods = [];
       $('#bc_addfoodarea').css('display', '');
     } else {
-      var qp = quickpicks[qpiselected];
+      var qp = quickpicks[parseInt(qpiselected)];
       foods = _.cloneDeep(qp.foods);
       $('#bc_addfoodarea').css('display', 'none');
     }
@@ -589,7 +591,7 @@ function init (client, $) {
     var qpiselected = $('#bc_quickpick').val();
 
     if (qpiselected >= 0) {
-      var qp = quickpicks[qpiselected];
+      var qp = quickpicks[parseInt(qpiselected)];
       if (qp.hideafteruse) {
         qp.hidden = true;
 
@@ -652,6 +654,7 @@ function init (client, $) {
     });
     $('#bc_quickpick').empty().append('<option value="-1">' + translate('(none)') + '</option>');
     for (var i = 0; i < records.length; i++) {
+      /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
       var r = records[i];
       $('#bc_quickpick').append('<option value="' + i + '">' + r.name + ' (' + r.carbs + ' g)</option>');
     }
@@ -696,6 +699,7 @@ function init (client, $) {
     }
     $('#bc_data').empty();
     for (var i = 0; i < foodlist.length; i++) {
+      /* eslint-disable security/detect-object-injection */ // verified false positive
       if (filter.category !== '' && foodlist[i].category !== filter.category) { continue; }
       if (filter.subcategory !== '' && foodlist[i].subcategory !== filter.subcategory) { continue; }
       if (filter.name !== '' && foodlist[i].name.toLowerCase().indexOf(filter.name.toLowerCase()) < 0) { continue; }
@@ -705,6 +709,7 @@ function init (client, $) {
       o += foodlist[i].unit + ' | ';
       o += 'Carbs: ' + foodlist[i].carbs + ' g';
       $('#bc_data').append('<option value="' + i + '">' + o + '</option>');
+      /* eslint-enable security/detect-object-injection */ // verified false positive
     }
     $('#bc_addportions').val('1');
 
@@ -728,8 +733,11 @@ function init (client, $) {
             var index = $('#bc_data').val();
             var portions = parseFloat($('#bc_addportions').val().replace(',', '.'));
             if (index !== null && !isNaN(portions) && portions > 0) {
+              index = parseInt(index);
+              /* eslint-disable security/detect-object-injection */ // verified false positive
               foodlist[index].portions = portions;
               foods.push(_.cloneDeep(foodlist[index]));
+              /* eslint-enable security/detect-object-injection */ // verified false positive
               $(this).dialog('close');
               boluscalc.calculateInsulin();
             }

lib/client/browser-settings.js

@@ -170,6 +170,7 @@ function init (client, serverSettings, $) {
     });
 
     //if there is a token, append it to each of the links in the hamburger menu
+    /* eslint-disable security/detect-possible-timing-attacks */ // verified false positive
     if (token != '') {
       token = '?token=' + token;
       $('#reportlink').attr('href', 'report' + token);
@@ -215,6 +216,7 @@ function init (client, serverSettings, $) {
 
       function storeInBrowser (data) {
         Object.keys(data).forEach(k => {
+          /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
           storage.set(k, data[k]);
         });
       }
@@ -279,6 +281,7 @@ function init (client, serverSettings, $) {
   try {
     settings.eachSetting(function setEach (name) {
       var stored = storage.get(name);
+      /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
       return stored !== undefined && stored !== null ? stored : serverSettings.settings[name];
     });
 

lib/client/careportal.js

@@ -76,6 +76,13 @@ function init (client, $) {
       }
     }
 
+    // validate the eventType input - should never hit this but bail if we do
+    if (!Object.prototype.hasOwnProperty.call(inputMatrix, eventType)) {
+      maybePrevent(event);
+      return;
+    }
+
+    /* eslint-disable security/detect-object-injection */ // verified false positive by check above
     var reasons = inputMatrix[eventType]['reasons'];
     $('#reasonLabel').css('display', displayType(reasons && reasons.length > 0));
     $('#targets').css('display', displayType(inputMatrix[eventType]['targets']));
@@ -125,13 +132,20 @@ function init (client, $) {
     resetIfHidden(inputMatrix[eventType]['prebolus'], '#preBolus');
     resetIfHidden(inputMatrix[eventType]['split'], '#insulinSplitNow');
     resetIfHidden(inputMatrix[eventType]['split'], '#insulinSplitExt');
+    /* eslint-enable security/detect-object-injection */ // verified false positive
 
     maybePrevent(event);
   };
 
   careportal.reasonable = function reasonable () {
     var eventType = $('#eventType').val();
-    var reasons = inputMatrix[eventType]['reasons'];
+    var reasons = [];
+
+    // validate the eventType input before getting the reasons list
+    if (Object.prototype.hasOwnProperty.call(inputMatrix, eventType)) {
+      /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
+      reasons = inputMatrix[eventType]['reasons'];
+    }
     var selected = $('#reason').val();
 
     var reason = _.find(reasons, function matches (r) {
@@ -267,7 +281,13 @@ function init (client, $) {
       delete data.preBolus;
     }
 
-    var reasons = inputMatrix[eventType]['reasons'];
+    var reasons = [];
+
+    // validate the eventType input before getting the reasons list
+    if (Object.prototype.hasOwnProperty.call(inputMatrix, eventType)) {
+      /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
+      reasons = inputMatrix[eventType]['reasons'];
+    }
     var reason = _.find(reasons, function matches (r) {
       return r.name === selectedReason;
     });
@@ -315,9 +335,11 @@ function init (client, $) {
 
     let d = {};
     Object.keys(data).forEach(function(key) {
+      /* eslint-disable security/detect-object-injection */ // verified false positive
       if (data[key] !== "" && data[key] !== null) {
-          d[key] = data[key]
+        d[key] = data[key]
-        }
+      }
+      /* eslint-enable security/detect-object-injection */ // verified false positive
     });
 
     return d;

lib/client/chart.js

@@ -703,6 +703,7 @@ function init (client, d3, $) {
     var pointTypes = client.settings.showForecast.split(' ');
 
     var points = pointTypes.reduce( function (points, type) {
+      /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
       return points.concat(client.sbx.pluginBase.forecastPoints[type] || []);
     }, [] );
 

lib/client/clock-client.js

@@ -90,11 +90,15 @@ client.render = function render () {
 
   for (let param in faceParams) {
     if (param === '0') {
-      bgColor = (faceParams[param].substr(0, 1) === 'c'); // do we want colorful background?
+      /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
-      alwaysShowTime = (faceParams[param].substr(1, 1) === 'y'); // always show "stale time" text?
+      let faceParam = faceParams[param];
-      staleMinutes = (faceParams[param].substr(2, 2) - 0 >= 0) ? faceParams[param].substr(2, 2) : 13; // threshold value (0=never)
+      bgColor = (faceParam.substr(0, 1) === 'c'); // do we want colorful background?
+      alwaysShowTime = (faceParam.substr(1, 1) === 'y'); // always show "stale time" text?
+      staleMinutes = (faceParam.substr(2, 2) - 0 >= 0) ? faceParam.substr(2, 2) : 13; // threshold value (0=never)
     } else if (!clockCreated) {
-      let div = '<div class="' + faceParams[param].substr(0, 2) + '"' + ((faceParams[param].substr(2, 2) - 0 > 0) ? ' style="' + ((faceParams[param].substr(0, 2) === 'ar') ? 'height' : 'font-size') + ':' + faceParams[param].substr(2, 2) + 'vmin"' : '') + '></div>';
+      /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
+      let faceParam = faceParams[param];
+      let div = '<div class="' + faceParam.substr(0, 2) + '"' + ((faceParam.substr(2, 2) - 0 > 0) ? ' style="' + ((faceParam.substr(0, 2) === 'ar') ? 'height' : 'font-size') + ':' + faceParam.substr(2, 2) + 'vmin"' : '') + '></div>';
       $inner.append(div);
     }
   }

lib/client/d3locales.js

@@ -234,9 +234,14 @@ d3locales.locale = function locale (language) {
     ,bg: 'bg_BG'
   };
   var loc = 'en_US';
-  if (mapper[language]) {
+
+  // validate the eventType input before getting the reasons list
+  if (Object.prototype.hasOwnProperty.call(mapper, language)) {
+    /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
     loc = mapper[language];
   }
+
+  /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
   return d3locales[loc];
 };
 

lib/client/index.js

@@ -871,9 +871,15 @@ client.load = function load (serverSettings, callback) {
 
   function getClientAlarm (level, group) {
     var key = level + '-' + group;
-    var alarm = clientAlarms[key];
+    var alarm = null;
+    // validate the key before getting the alarm
+    if (Object.prototype.hasOwnProperty.call(clientAlarms, key)) {
+      /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
+      alarm = clientAlarms[key];
+    }
     if (!alarm) {
       alarm = { level: level, group: group };
+      /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
       clientAlarms[key] = alarm;
     }
     return alarm;
@@ -963,6 +969,7 @@ client.load = function load (serverSettings, callback) {
 
     document.addEventListener(visibilityChange, function visibilityChanged () {
       var prevHidden = client.documentHidden;
+      /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
       client.documentHidden = document[hidden];
 
       if (prevHidden && !client.documentHidden) {
@@ -1002,6 +1009,7 @@ client.load = function load (serverSettings, callback) {
 
   $('.bgButton').click(function(e) {
     if (alarmingNow()) {
+      /* eslint-disable-next-line security/detect-non-literal-fs-filename */ // verified false positive
       silenceDropdown.open(e);
     }
   });
@@ -1016,6 +1024,7 @@ client.load = function load (serverSettings, callback) {
       Storages.localStorage.set('focusHours', hours);
       refreshChart();
     } else {
+      /* eslint-disable-next-line security/detect-non-literal-fs-filename */ // verified false positive
       viewDropdown.open(e);
     }
   });

lib/client/receiveddata.js

@@ -11,17 +11,21 @@ function mergeDataUpdate (isDelta, cachedDataArray, receivedDataArray, maxAge) {
     var l = oldArray.length;
 
     for (var i = 0; i < l; i++) {
+      /* eslint-disable security/detect-object-injection */ // verified false positive
       if (oldArray[i] !== null) {
         seen.push(oldArray[i].mills);
       }
+      /* eslint-enable security/detect-object-injection */ // verified false positive
     }
 
     var result = [];
     l = newArray.length;
     for (var j = 0; j < l; j++) {
+      /* eslint-disable security/detect-object-injection */ // verified false positive
       if (!seen.includes(newArray[j].mills)) {
         result.push(newArray[j]); //console.log('delta data found');
       }
+      /* eslint-enable security/detect-object-injection */ // verified false positive
     }
     return result;
   }
@@ -41,6 +45,7 @@ function mergeDataUpdate (isDelta, cachedDataArray, receivedDataArray, maxAge) {
   var twoDaysAgo = new Date().getTime() - mAge;
 
   for (var i = 0; i < cachedDataArray.length; i++) {
+    /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
     var element = cachedDataArray[i];
     if (element !== null && element !== undefined && element.mills <= twoDaysAgo) {
       cachedDataArray.splice(i, 0);
@@ -70,12 +75,14 @@ function mergeTreatmentUpdate (isDelta, cachedDataArray, receivedDataArray) {
   var l = receivedDataArray.length;
   var m = cachedDataArray.length;
   for (var i = 0; i < l; i++) {
+    /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
     var no = receivedDataArray[i];
     if (!no.action) {
       cachedDataArray.push(no);
       continue;
     }
     for (var j = 0; j < m; j++) {
+      /* eslint-disable security/detect-object-injection */ // verified false positive
       if (no._id === cachedDataArray[j]._id) {
         if (no.action === 'remove') {
           cachedDataArray.splice(j, 1);

lib/client/renderer.js

@@ -618,6 +618,7 @@ function init (client, d3) {
       if (treatment.boluscalc.foods && treatment.boluscalc.foods.length) {
         html += '<table><tr><td><strong>' + translate('Food') + '</strong></td></tr>';
         for (var fi = 0; fi < treatment.boluscalc.foods.length; fi++) {
+          /* eslint-disable-next-line security/detect-object-injection */ // verified false positive
           var f = treatment.boluscalc.foods[fi];
           html += '<tr>';
           html += '<td>' + f.name + '</td>';

lib/language.js

@@ -106,7 +106,7 @@ function init (fs) {
 
     if (keys) {
       for (i = 0; i < keys.length; i++) {
-        // eslint-disable-next-line no-useless-escape
+        /* eslint-disable-next-line no-useless-escape, security/detect-non-literal-regexp */ // validated false positive
         var r = new RegExp('\%' + (i + 1), 'g');
         translated = translated.replace(r, keys[i]);
       }
@@ -144,6 +144,7 @@ function init (fs) {
   language.loadLocalization = function loadLocalization (fs, path) {
     let filename = './translations/' + this.getFilename(this.lang);
     if (path) filename = path.resolve(__dirname, filename);
+    /* eslint-disable-next-line security/detect-non-literal-fs-filename */ // verified false positive; well defined set of values
     const l = fs.readFileSync(filename);
     this.offerTranslations(JSON.parse(l));
   }

lib/server/app.js

@@ -311,7 +311,6 @@ function create (env, ctx) {
       middleware(compiler, {
         // webpack-dev-middleware options
         publicPath: webpack_conf.output.publicPath
-        , lazy: false
       })
     );
 

package.json

@@ -71,6 +71,8 @@
   "dependencies": {
     "@babel/core": "^7.11.1",
     "@babel/preset-env": "^7.12.11",
+    "acorn": "^8.0.5",
+    "acorn-jsx": "^5.3.1",
     "apn": "^2.2.0",
     "async": "^0.9.2",
     "babel-loader": "^8.1.0",
@@ -78,8 +80,10 @@
     "body-parser": "^1.19.0",
     "bootevent": "0.0.1",
     "braces": "^3.0.2",
+    "buffer": "^6.0.3",
     "compression": "^1.7.4",
-    "css-loader": "^1.0.1",
+    "crypto-browserify": "^3.12.0",
+    "css-loader": "^5.0.1",
     "cssmin": "^0.4.3",
     "csv-stringify": "^5.5.1",
     "d3": "^5.16.0",
@@ -88,10 +92,10 @@
     "ejs": "^2.7.4",
     "errorhandler": "^1.5.1",
     "event-stream": "3.3.4",
-    "expose-loader": "^0.7.5",
+    "expose-loader": "^2.0.0",
     "express": "^4.17.1",
     "express-minify": "^1.0.0",
-    "file-loader": "^3.0.1",
+    "file-loader": "^6.2.0",
     "flot": "^0.8.3",
     "helmet": "^4.0.0",
     "jquery": "^3.5.1",
@@ -114,6 +118,7 @@
     "owasp-password-strength-test": "^1.3.0",
     "parse-duration": "^0.1.3",
     "pem": "^1.14.4",
+    "process": "^0.11.10",
     "pushover-notifications": "^1.2.2",
     "random-token": "0.0.8",
     "request": "^2.88.2",
@@ -122,33 +127,33 @@
     "shiro-trie": "^0.4.9",
     "simple-statistics": "^0.7.0",
     "socket.io": "~2.1.1",
+    "stream-browserify": "^3.0.0",
     "style-loader": "^0.23.1",
     "swagger-ui-dist": "^3.32.1",
     "swagger-ui-express": "^4.1.4",
-    "terser": "^3.17.0",
     "traverse": "^0.6.6",
     "uuid": "^3.4.0",
-    "webpack": "^4.44.1",
+    "webpack": "^5.20.2",
-    "webpack-cli": "^3.3.12"
+    "webpack-cli": "^4.5.0"
   },
   "devDependencies": {
+    "@types/tough-cookie": "^4.0.0",
     "axios": "^0.21.1",
     "babel-eslint": "^10.1.0",
     "benv": "^3.3.0",
     "codacy-coverage": "^3.4.0",
     "csv-parse": "^4.12.0",
     "env-cmd": "^10.1.0",
-    "eslint": "^6.8.0",
+    "eslint": "^7.19.0",
-    "eslint-loader": "^2.2.1",
     "eslint-plugin-security": "^1.4.0",
+    "eslint-webpack-plugin": "^2.4.3",
     "mocha": "^8.1.1",
     "nodemon": "^1.19.4",
     "nyc": "^14.1.1",
     "should": "^13.2.3",
     "supertest": "^3.4.2",
-    "terser-webpack-plugin": "^1.4.5",
+    "webpack-bundle-analyzer": "^4.4.0",
-    "webpack-bundle-analyzer": "^3.8.0",
+    "webpack-dev-middleware": "^4.1.0",
-    "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
     "xml2js": "^0.4.23"
   },

static/css/drawer.css

@@ -227,7 +227,7 @@ h1, legend,
   padding: 0 15px 0 40px;
   position: relative;
   align-items: center;
-  background: url(/images/logo2.png) no-repeat 3px center #333;
+  background: url("../images/logo2.png") no-repeat 3px center #333;
   border-bottom: 1px solid #999;
   justify-content: space-between;
 }

views/adminindex.html

@@ -29,6 +29,7 @@
       <link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
       <link rel="preload" href="/css/drawer.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
       <link rel="preload" href="/css/admin.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+      <link rel="preload" href="/css/dropdown.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
       <link rel="preload" href="/css/ui-darkness/jquery-ui.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
       <%- include('preloadCSS')%>
     </head>

views/index.html

@@ -31,6 +31,8 @@
   <link rel="preload" href="css/ui-darkness/jquery-ui.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <link rel="preload" href="css/jquery.tooltips.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <link rel="preload" href="css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <link rel="preload" href="css/drawer.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <link rel="preload" href="css/dropdown.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
 
   <style media="screen" type="text/css">
     #centerMessagePanel {

views/reportindex.html

@@ -24,7 +24,9 @@
   <meta name="theme-color" content="#333333">
 
   <link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <link rel="preload" href="/css/drawer.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <link rel="preload" href="/css/report.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+  <link rel="preload" href="/css/dropdown.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <link rel="preload" href="/css/ui-lightness/jquery-ui.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <%- include('preloadCSS')%>
   
@@ -128,4 +130,4 @@
   <script src="/report/js/loopalyzer.js"></script>
   <script src="/js/reportinit.js"></script>
 </body>
-</html>  
+</html>  

webpack.config.js

@@ -3,7 +3,6 @@ const webpack = require('webpack');
 const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 const pluginArray = [];
 const sourceMapType = 'source-map';
-const TerserPlugin = require('terser-webpack-plugin');
 const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin');
 
 /*
@@ -53,6 +52,10 @@ pluginArray.push(new webpack.ProvidePlugin({
   'window.$': 'jquery'
 }));
 
+pluginArray.push(new webpack.ProvidePlugin({
+  process: 'process/browser',
+}));
+
 // limit Timezone data from Moment
 
 pluginArray.push(new MomentTimezoneDataPlugin({
@@ -68,6 +71,21 @@ pluginArray.push(new MomentLocalesPlugin({
   ],
 }));
 
+if (process.env.NODE_ENV === 'development') {
+  const ESLintPlugin = require('eslint-webpack-plugin');
+  pluginArray.push(new ESLintPlugin({
+    emitWarning: true,
+    failOnError: false,
+    failOnWarning: false,
+    formatter: require('eslint').CLIEngine.getFormatter('stylish'),
+    overrideConfig: {
+      globals: {
+        '$': 'writeable'
+      }
+    }
+  }));
+}
+
 const rules = [
   {
     test: /\.(js|jsx)$/,
@@ -80,28 +98,33 @@ const rules = [
       }
     }
   },
+  {
+    test: /\.css$/i,
+    use: [ 'style-loader',
+      {
+        loader: 'css-loader',
+        options: {
+          sourceMap: true,
+        },
+      } ],
+    exclude: /node_modules/
+  },
   {
     test: /\.(jpe?g|png|gif)$/i,
     loader: 'file-loader',
-    query: {
+    options: {
-      name: '[name].[ext]',
+      outputPath: 'images'
-      outputPath: 'images/'
       //the images will be emmited to public/assets/images/ folder
       //the images will be put in the DOM <style> tag as eg. background: url(assets/images/image.png);
     },
     exclude: /node_modules/
   },
-  {
-    test: /\.css$/,
-    loaders: ['style-loader', 'css-loader'],
-    exclude: /node_modules/
-  },
   {
     test: require.resolve('jquery'),
-    use: [{
+    loader: 'expose-loader',
-      loader: 'expose-loader',
+    options: {
-      options: '$'
+      exposes: ['$']
-    }]
+    }
   }
 ];
 
@@ -111,7 +134,7 @@ const clockEntry = ['./bundle/bundle.clocks.source.js'];
 let mode = 'production';
 let publicPath = '/bundle/';
 
-if (process.env.NODE_ENV == 'development') {
+if (process.env.NODE_ENV === 'development') {
   mode = 'development';
   publicPath = '/devbundle/';
   pluginArray.push(new webpack.HotModuleReplacementPlugin());
@@ -121,39 +144,10 @@ if (process.env.NODE_ENV == 'development') {
 
   appEntry.unshift(hot);
   clockEntry.unshift(hot);
-
-  rules.unshift({
-    enforce: "pre",
-    test: /\.js$/,
-    exclude: [/node_modules/, /bundle/],
-    loader: "eslint-loader",
-    options: {
-      emitWarning: true,
-      failOnError: false,
-      failOnWarning: false,
-      formatter: require('eslint/lib/cli-engine/formatters/stylish')
-    }
-  });
-
 }
 
 const optimization = {};
 
-if (process.env.NODE_ENV !== 'development') {
-  optimization.minimizer = [
-    new TerserPlugin({
-      cache: true,
-      parallel: true,
-      sourceMap: true, // Must be set to true if using source-maps in production
-      terserOptions: {
-        ie8: false,
-        safari10: false
-        // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
-      }
-    }),
-  ];
-};
-
 module.exports = {
   mode,
   context: __dirname,
@@ -173,5 +167,12 @@ module.exports = {
   plugins: pluginArray,
   module: {
     rules
+  },
+  resolve: {
+    alias: {
+      stream: 'stream-browserify',
+      crypto: 'crypto-browserify',
+      buffer: 'buffer',
+    }
   }
-};
+};