SPFx 1.19+ New Features — What’s Changed & How to Use Them

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:

What changed
Why it matters
How you can use the new features in your projects

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:

Faster builds - Webpack 5 bundles your code more efficiently.
Smaller bundle size - It removes unused code more intelligently.
Better compatibility - Newer NPM packages and modern JS libraries work better with Webpack 5.

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

Faster bug fixes
Faster access to new developer tooling
You no longer need to wait for a full SPFx release

Node.js 18 Required

SPFx 1.19 only supports Node 18.

Why Node 18?

It’s modern
It supports newer NPM libraries
It has better security

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?

Line charts
Bar charts
KPI cards
Trend graphs
Sales performance cards
Usage analytics cards

These charts can read data from:

SharePoint lists
Microsoft Graph
External APIs

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:

Microsoft Teams
Outlook
Office.com

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:

sharepoint
teams
outlook
office

You can now:

Change UI based on the host
Enable extra features only for Teams
Detect if dark mode is enabled

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:

SPFx internal UI components use React 17
Teams SDK UI packages depend on React 17
Upgrading requires major breaking changes

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:

Uninstall the existing v1.18.x package:

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

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:

You want new Viva Connections features
You want modern Webpack 5 performance
Your organization uses Viva dashboards
You want Node 18 support

Avoid upgrading if:

You depend on old custom Webpack plugins
You still use Node 10/12/14/16
You rely heavily on React 18 customizations

Conclusion

SPFx 1.19+ focuses on:

Performance improvements
Modern toolchain upgrades
Better Viva Connections experiences
Stronger Teams and Microsoft 365 integration

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.