Upgrade Navigator to Webpack 5 (#11040)

* Upgrade Navigator to Webpack 5 changelog_begin changelog_end * Disable broken modernizr checks changelog_begin changelog_end * drop unused dep changelog_begin changelog_end
digital-asset · Sep 27, 2021 · 6bf45a3 · 6bf45a3
1 parent 80e217e
commit 6bf45a3
Show file tree

Hide file tree

Showing 7 changed files with 455 additions and 1,958 deletions.
diff --git a/navigator/frontend/.modernizrrc b/navigator/frontend/.modernizrrc
@@ -17,8 +17,6 @@
     "es5/specification",
     "es5/strictmode",
     "es5/string",
-    "es5/syntax",
-    "es5/undefined",
     "es6/promises",
     "history",
     "json",

diff --git a/navigator/frontend/BUILD.bazel b/navigator/frontend/BUILD.bazel
@@ -80,6 +80,7 @@ genrule(
         "tsconfig.json",
         ".eslintrc.js",
         "package.json",
+        "modernizr.js",
         ".modernizrrc",
         ":src",
         "@navigator_frontend_deps//:node_modules",
@@ -102,6 +103,7 @@ genrule(
     cp -rL "$$(pwd)/external/navigator_frontend_deps/node_modules" "$$IN/node_modules"
     cp -L "$$(pwd)/$(execpath webpack.config.js)" "$$IN/webpack.config.js"
     cp -L "$$(pwd)/$(execpath .modernizrrc)" "$$IN/.modernizrrc"
+    cp -L "$$(pwd)/$(execpath modernizr.js)" "$$IN/modernizr.js"
     cp -L "$$(pwd)/$(execpath tsconfig.json)" "$$IN/tsconfig.json"
     cp -L "$$(pwd)/$(execpath .eslintrc.js)" "$$IN/.eslintrc.js"
     cp -L "$$(pwd)/$(execpath declarations.d.ts)" "$$IN/declarations.d.ts"

diff --git a/navigator/frontend/modernizr.js b/navigator/frontend/modernizr.js
@@ -0,0 +1,19 @@
+// Copyright (c) 2021 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+// Variation of https://webpack.js.org/loaders/val-loader/#modernizr
+const fs = require("fs");
+const modernizr = require("modernizr");
+
+module.exports = function (options = {}, loaderContext) {
+  const content = fs.readFileSync(loaderContext.resourcePath, 'utf8');
+  return new Promise(function (resolve) {
+    modernizr.build(JSON.parse(content), function (output) {
+      resolve({
+        cacheable: true,
+        code: `var modernizr; var hadGlobal = 'Modernizr' in window; var oldGlobal = window.Modernizr; ${output} modernizr = window.Modernizr; if (hadGlobal) { window.Modernizr = oldGlobal; } else { delete window.Modernizr; } export default modernizr;`,
+      });
+    });
+  });
+};
+
diff --git a/navigator/frontend/package.json b/navigator/frontend/package.json
@@ -46,18 +46,18 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-webpack-plugin": "^2.4.1",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^4.5.0",
+    "html-webpack-plugin": "^5.3.2",
     "json-loader": "^0.5.7",
     "license-checker": "^25.0.1",
-    "modernizr-loader": "^1.0.1",
     "raw-loader": "^4.0.2",
     "style-loader": "^2.0.0",
-    "ts-loader": "8.0.11",
+    "ts-loader": "^9.2.6",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
     "typescript": "4.1.2",
     "url-loader": "^4.1.1",
-    "webpack": "^4.44.2",
-    "webpack-cli": "^4.2.0",
+    "val-loader": "^4.0.0",
+    "webpack": "^5.54.0",
+    "webpack-cli": "^4.8.0",
     "webpack-dev-server": "^4.3.0"
   },
   "dependencies": {
@@ -70,7 +70,7 @@
     "graphql": "^15.4.0",
     "jpeg-js": "^0.4.1",
     "lodash": "^4.17.19",
-    "modernizr": "^3.11.4",
+    "modernizr": "^3.11.8",
     "moment": "^2.23.0",
     "normalize.css": "^8.0.1",
     "react": "^17.0.1",

diff --git a/navigator/frontend/src/browsercheck.ts b/navigator/frontend/src/browsercheck.ts
@@ -11,7 +11,7 @@
  * advanced JavaScript language features, and uses a simple alert() to notify the user.
  */
 
-import * as Modernizr from 'modernizr';
+import Modernizr from 'modernizr';
 
 // List of required features.
 // Note that the properties on the Modernizr object have different names than
@@ -24,15 +24,18 @@ const features = [
   'es5date',
   'es5function',
   'es5object',
-  'es5',
   'strictmode',
   'es5string',
-  'es5syntax',
-  'es5undefined',
   // 'promises', - we use a polyfill for this
   'history',
   'json',
   // 'fetch', - we use a polyfill for this
+  /* These checks are not supported in strict mode and webpack doesn’t
+  provide a reasonable way to exclude modernizr from strict mode.
+  'es5',
+  'es5syntax',
+  'es5undefined',
+  */
 ];
 
 // Find all features from above list that are not supported in current browser

diff --git a/navigator/frontend/webpack.config.js b/navigator/frontend/webpack.config.js
@@ -93,7 +93,7 @@ module.exports = (env) => {
     context: in_dir,
     output: {
       path: out_dir,
-      filename: '[name]-[hash].js',
+      filename: '[name]-[fullhash].js',
       // In production, we serve static assets under /assets and publicPath
       // makes WebPack set file references relative to this and because this is
       // a root path, file references will all be relative to the root, which is
@@ -111,7 +111,12 @@ module.exports = (env) => {
       rules: [
         {
           test: /\.modernizrrc$/,
-          loader: "modernizr-loader!json-loader",
+          use: [{
+            loader: 'val-loader',
+            options: {
+              executableFile: path.resolve(__dirname, "modernizr.js")
+            }
+          }]
         },
         {
           test: /\.tsx?$/,
@@ -124,14 +129,14 @@ module.exports = (env) => {
         },
         {
           test: /\.css$/,
-          loader: 'style-loader!css-loader'
+          use: ['style-loader', 'css-loader']
         },
-        { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192' },
+        { test: /\.(png|jpg)$/, use: { loader: 'url-loader', options: { limit: 8192 } } },
         {
           test: /\.(woff|woff2)$/, use: {
             loader: 'url-loader',
             options: {
-              name: 'fonts/[hash].[ext]',
+              name: 'fonts/[contenthash].[ext]',
               limit: 5000,
               mimetype: 'application/font-woff'
             }
@@ -141,7 +146,7 @@ module.exports = (env) => {
           test: /\.(ttf|eot|svg)$/, use: {
             loader: 'file-loader',
             options: {
-              name: 'fonts/[hash].[ext]'
+              name: 'fonts/[contenthash].[ext]'
             }
           }
         }