SharePoint  

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:

  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:

  • 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.

Membership not found