The SharePoint Framework (SPFx) is the main way to build custom solutions for SharePoint Online, Microsoft Teams, and Viva Connections.
In versions 1.19+ and later, Microsoft has made important updates that improve performance, modernize the toolchain, and add new capabilities to Viva Connections dashboards.

This article explains:

1. Latest Toolchain Updates

SPFx 1.19 comes with three major tooling upgrades. These affect how you build, bundle, and develop your project.

Webpack 5 Support

Earlier SPFx versions used Webpack 4, which was outdated.
Version 1.19 upgrades to Webpack 5, which gives you:

If your project uses custom loaders or configs, You may need small updates.

Example of a custom loader update:

{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
}

Independent Toolchain Releases

Before 1.19:
SPFx + Toolchain = Released together
Even a small bug in ESLint or the build system required a full SPFx release.

After 1.19:
The build tools (ESLint rules, Heft plugins, interface packages) can now be released separately.

Why this is great

Node.js 18 Required

SPFx 1.19 only supports Node 18.

Why Node 18?

If you're upgrading a project, switch your environment:

nvm use 18

2. Viva Connections Dashboard Enhancements

SPFx 1.19 introduces major improvements for Adaptive Card Extensions (ACEs) — the cards used in Viva Connections dashboards.

ACEs are important because they let you build mobile-friendly, lightweight UI cards for employees.

New Chart Card Layouts

SPFx 1.19 adds official support for chart-based ACE cards.

What can you build?

These charts can read data from:

Example: A Simple Chart ACE

Step 1: Create an ACE

yo @microsoft/sharepoint --plusbeta

Choose Adaptive Card Extension when prompted.

Step 2: Add chart data in your ACE code

this.state = {
  dataPoints: [
    { day: 'Mon', value: 10 },
    { day: 'Tue', value: 20 },
    { day: 'Wed', value: 15 }
  ]
};

Step 3: Bind data to the card

return {
  title: "Weekly Report",
  subtitle: "Sales Trend",
  data: this.state.dataPoints
};

This card now shows a simple line chart.

3. Teams Integration Improvements

SPFx solutions work not only in SharePoint — they also run inside:

This is called cross-host support, and SPFx 1.19 improves how your component detects where it is running.

Detecting Teams Context

You can detect if your SPFx web part or ACE is running inside Teams:

if (this.context.sdks.microsoftTeams) {
  const context = await this.context.sdks.microsoftTeams.teamsJs.app.getContext();
  console.log("Running in:", context.app.host.name);
}

Output may be:

You can now:

For example, showing a “Post to Channel” button only inside Teams.

Note: SPFx 1.19 still officially supports React 17

React 18 is under review but not released because:

Upgrading projects from the SPFx v1.18 to v1.19

In the project's package.json file, identify all SPFx v1.18.x packages. For each SPFx package:

  1. Uninstall the existing v1.18.x package:

npm uninstall @microsoft/{spfx-package-name}@1.18.x

  1. Install the new v1.19 package:

npm install @microsoft/{spfx-package-name}@latest --save --save-exact

Should You Upgrade to SPFx 1.19?

Upgrade if:

Avoid upgrading if:

Conclusion

SPFx 1.19+ focuses on:

For developers who build dashboards, ACE cards, or Teams-integrated solutions, SPFx 1.19 is a valuable upgrade.
React 18 support is still pending, but the base platform is getting faster, lighter, and more flexible with every release.