Documentation Update: Tutorial: Get started with ASP.NET Core SignalR using TypeScript and Webpack | Microsoft Learn

Customer Feedback

Page: Tutorial: Get started with ASP.NET Core SignalR using TypeScript and Webpack | Microsoft Learn
Source File: https://github.com/dotnet/AspNetCore.Docs/blob/live/aspnetcore/tutorials/signalr-typescript-webpack.md

Summary

Update the tutorial’s TypeScript/Webpack configuration and client error-handling code to match modern TypeScript defaults and browser-safe practices, removing outdated ES5 targeting guidance and deprecated document.write usage.

Suggested Fixes

Instructions for Copilot: Copilot should only fix suggestions with a checkmark and do not make any updates for unchecked suggestions.

• In the sections where the tutorial configures TypeScript/Webpack (the tsconfig.json and any referenced Webpack/ts-loader setup), remove any instruction or sample that sets "target": "es5" and replace it with a current, supported target (and explain the rationale). Also ensure the sample aligns with modern bundlers by adding/adjusting lib and module to avoid common warnings.

  Update the tutorial’s tsconfig.json snippet to something like:

  {
    "compilerOptions": {
      "target": "ES2020",
      "module": "ESNext",
      "moduleResolution": "Bundler",
      "lib": ["DOM", "ES2020"],
      "strict": true,
      "sourceMap": true,
      "skipLibCheck": true
    }
  }

  And add a note under the snippet:

  1. ES5 is no longer recommended/commonly supported in modern TS + Webpack setups.
  2. If readers must support legacy browsers, they should use a separate transpilation/polyfill strategy (e.g., Babel + core-js) instead of forcing the tutorial to ES5.

  (Adjust the exact target to the doc set’s current baseline, but ensure the tutorial no longer instructs ES5.)

• In the “Configure the SignalR TypeScript client” / index.ts portion of the tutorial, replace the deprecated document.write error path with a safe, modern error display/logging pattern and (optionally) a minimal UI element for visibility. Update the code block that currently shows connection.start().catch((err) => document.write(err));.

  Replace with a modern example:

  async function start() {
    try {
      await connection.start();
      console.log("SignalR connected.");
    } catch (err) {
      console.error("SignalR connection error:", err);
      const el = document.getElementById("errors");
      if (el) {
        el.textContent = String(err);
      }
    }
  }
  
  start();

  And add a one-line HTML prerequisite in the earlier markup section:

  <div id="errors" role="alert"></div>

  This removes deprecated behavior, avoids overwriting the document at runtime, and prevents build/runtime warnings in modern tooling.

📚 To learn more about agentic content maintenance workflow, visit Agentic workflow for Learn content maintenance. Sign in using Learn Profile to access the content on this link.

💬 Share your feedback on the Learn Content Maintenance Agentic Workflow here.