[Blazor] Update npm dependencies (#36088) (#36273)

* Updates npm dependencies to their latest versions.
* Standardizes build process for our JS dependencies on webpack 5 with babel, etc.
* Updates dependencies for the auth packages to their latest versions.
* Fixes test assets so that they can be run locally.

Author: javiercn

.azure/pipelines/jobs/default-build.yml

@@ -170,9 +170,9 @@ jobs:
         displayName: Start background dump collection
     - ${{ if eq(parameters.installNodeJs, 'true') }}:
       - task: NodeTool@0
-        displayName: Install Node 10.x
+        displayName: Install Node 14.x
         inputs:
-          versionSpec: 10.x
+          versionSpec: 14.x
     - ${{ if eq(parameters.agentOs, 'Windows') }}:
       - task: NuGetToolInstaller@1
       - task: NuGetCommand@2

eng/targets/Helix.props

@@ -20,7 +20,7 @@
     <IsMacHelixQueue Condition="$(HelixTargetQueue.Contains('OSX')) or $(HelixTargetQueue.Contains('macOs'))">true</IsMacHelixQueue>
     <HelixTestName>$(MSBuildProjectName)--$(TargetFramework)</HelixTestName>
     <LoggingTestingDisableFileLogging Condition="'$(IsHelixJob)' == 'true'">false</LoggingTestingDisableFileLogging>
-    <NodeVersion>10.15.3</NodeVersion>
+    <NodeVersion>14.17.6</NodeVersion>
     <TestDependsOnAspNetPackages>false</TestDependsOnAspNetPackages>
     <TestDependsOnAspNetRuntime>false</TestDependsOnAspNetRuntime>
   </PropertyGroup>

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -18,27 +18,27 @@
     "test": "jest"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.10",
-    "@babel/preset-env": "^7.13.10",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
     "@microsoft/dotnet-js-interop": "link:../../JSInterop/Microsoft.JSInterop.JS/src",
     "@microsoft/signalr": "link:../../SignalR/clients/ts/signalr",
     "@microsoft/signalr-protocol-msgpack": "link:../../SignalR/clients/ts/signalr-protocol-msgpack",
-    "@types/emscripten": "^1.39.4",
-    "@types/jest": "^26.0.20",
-    "@types/jsdom": "^16.2.7",
-    "@typescript-eslint/eslint-plugin": "^4.17.0",
-    "@typescript-eslint/parser": "^4.17.0",
-    "babel-jest": "^26.6.3",
-    "eslint": "^7.21.0",
-    "inspectpack": "^4.6.1",
-    "jest": "^26.6.3",
+    "@types/emscripten": "^1.39.5",
+    "@types/jest": "^27.0.1",
+    "@types/jsdom": "^16.2.13",
+    "@typescript-eslint/eslint-plugin": "^4.29.3",
+    "@typescript-eslint/parser": "^4.29.3",
+    "babel-jest": "^27.1.0",
+    "eslint": "^7.32.0",
+    "inspectpack": "^4.7.1",
+    "jest": "^27.1.0",
     "rimraf": "^3.0.2",
-    "terser": "^5.6.0",
-    "ts-jest": "^26.5.3",
-    "ts-loader": "^8.0.17",
-    "typescript": "^4.2.3",
-    "webpack": "^5.24.4",
-    "webpack-cli": "^4.5.0"
+    "terser": "^5.7.2",
+    "ts-jest": "^27.0.5",
+    "ts-loader": "^9.2.5",
+    "typescript": "^4.4.2",
+    "webpack": "^5.51.1",
+    "webpack-cli": "^4.8.0"
   },
   "resolutions": {
     "**/set-value": "^3.0.2"

src/Components/Web.JS/dist/Release/blazor.webview.js

@@ -139,17 +139,17 @@ async function initializeConnection(options: CircuitStartOptions, logger: Logger
   try {
     await connection.start();
   } catch (ex) {
-    unhandledError(connection, ex, logger);
+    unhandledError(connection, ex as Error, logger);
 
-    if (ex.innerErrors && ex.innerErrors.some(e => e.errorType === 'UnsupportedTransportError' && e.transport === HttpTransportType.WebSockets)) {
+    if (!isNestedError(ex)) {
+      showErrorNotification();
+    } else if (ex.innerErrors && ex.innerErrors.some(e => e.errorType === 'UnsupportedTransportError' && e.transport === HttpTransportType.WebSockets)) {
       showErrorNotification('Unable to connect, please ensure you are using an updated browser that supports WebSockets.');
     } else if (ex.innerErrors && ex.innerErrors.some(e => e.errorType === 'FailedToStartTransportError' && e.transport === HttpTransportType.WebSockets)) {
       showErrorNotification('Unable to connect, please ensure WebSockets are available. A VPN or proxy may be blocking the connection.');
     } else if (ex.innerErrors && ex.innerErrors.some(e => e.errorType === 'DisabledTransportError' && e.transport === HttpTransportType.LongPolling)) {
       logger.log(LogLevel.Error, 'Unable to initiate a SignalR connection to the server. This might be because the server is not configured to support WebSockets. To troubleshoot this, visit https://aka.ms/blazor-server-websockets-error.');
       showErrorNotification();
-    } else {
-      showErrorNotification();
     }
   }
 
@@ -166,8 +166,14 @@ async function initializeConnection(options: CircuitStartOptions, logger: Logger
   });
 
   return connection;
+
+  function isNestedError(error: any): error is AggregateError {
+    return error && ('innerErrors' in error);
+  }
 }
 
+type AggregateError = Error & { innerErrors: { errorType: string, transport: HttpTransportType }[] };
+
 function unhandledError(connection: HubConnection, err: Error, logger: Logger): void {
   logger.log(LogLevel.Error, err);
 

src/Components/Web.JS/package.json

@@ -47,7 +47,7 @@ export function sendJSDataStream(connection: HubConnection, data: ArrayBufferVie
                 chunkId++;
             }
         } catch (error) {
-            await connection.send('ReceiveJSDataChunk', streamId, -1, null, error.toString());
+            await connection.send('ReceiveJSDataChunk', streamId, -1, null, (error as Error).toString());
         }
     }, 0);
 };

src/Components/Web.JS/src/Boot.Server.ts

@@ -42,7 +42,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
     this.button = this.modal.querySelector('button')!;
     this.reloadParagraph = this.modal.querySelector('p')!;
     this.loader = this.getLoader();
-    
+
     this.message.after(this.loader);
 
     this.button.addEventListener('click', async () => {
@@ -59,7 +59,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
         }
       } catch (err) {
         // We got an exception, server is currently unavailable
-        this.logger.log(LogLevel.Error, err);
+        this.logger.log(LogLevel.Error, err as Error);
         this.failed();
       }
     });
@@ -126,7 +126,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
     loader.animate([
       { transform: 'rotate(0deg)' },
       { transform: 'rotate(360deg)' }
-    ], { 
+    ], {
       duration: 2000,
       iterations: Infinity
     });

src/Components/Web.JS/src/Platform/Circuits/CircuitStreamingInterop.ts

@@ -82,7 +82,7 @@ class ReconnectionProcess {
         return;
       } catch (err) {
         // We got an exception so will try again momentarily
-        this.logger.log(LogLevel.Error, err);
+        this.logger.log(LogLevel.Error, err as Error);
       }
     }
 

src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectDisplay.ts

@@ -54,11 +54,11 @@ export class RenderQueue {
       renderBatch(this.browserRendererId, new OutOfProcessRenderBatch(batchData));
       await this.completeBatch(connection, receivedBatchId);
     } catch (error) {
-      this.fatalError = error.toString();
+      this.fatalError = (error as Error).toString();
       this.logger.log(LogLevel.Error, `There was an error applying batch ${receivedBatchId}.`);
 
       // If there's a rendering exception, notify server *and* throw on client
-      connection.send('OnRenderCompleted', receivedBatchId, error.toString());
+      connection.send('OnRenderCompleted', receivedBatchId, (error as Error).toString());
       throw error;
     }
   }