Support for React 18

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

Additional environment details

Not Applicable.

Issue description

Just wondering if there's any ETA and/or any plans to support React v18? I believe that it's been about 2.5 years since it was released. I saw some questions and discussion regarding support in 2022 and it looks like there was a jump to React 17.

However, I've found the lack of support for React 18 to be a barrier in porting several of my commonly used components into an spfx solution I was working on. Thanks for your time!

Piling on... if we're in the upgrade business, let's jump to React 19 which goes GA on September 23, 2024

Vesa's team don't care.
#8715
#9263
#9463

SPFx long term support would greatly benefit from updating to react 18/19. Many npm packages are moving on from supporting 17. For example Vercel's AI SDK and Framer Motion are 18+.

A refactor of the generator to functional components would also be appreciated.

Andrew Connell (@andrewconnell)

React 17 has been released without introducing new features, focusing instead on providing an easier upgrade path for future versions.

from React v17.0 release announcement

No New Features

The React 17 release is unusual because it doesn’t add any new developer-facing features. Instead, this release is primarily focused on making it easier to upgrade React itself.

In particular, React 17 is a “stepping stone” release that makes it safer to embed a tree managed by one version of React inside a tree managed by a different version of React.

It also makes it easier to embed React into apps built with other technologies.

Based on my tests, there’s nothing stopping us from using React 18 (I haven’t tried React 19 yet). To test React 18, I had to tweak the build chain to avoid marking React as external. I can share details if anyone is interested.
Since we’re using isolated React instances in each web part, we can technically use any version of React. Even though the SP UI is built on React 17, our components should still work with different React versions.

The real issue is Microsoft’s decision to not update the toolchain, which prevents us from using modern, high-quality libraries to build better products for our customers. As a result, we often have to reinvent the wheel and rebuild things manually due to stack-level dependencies.

Here’s a growing list of libraries I can’t use in SPFx because they require React 18 or TypeScript 5 (yes, Andrew Connell (@andrewconnell) explained it’s possible), but only up to TypeScript 5.3, while the latest version is 5.8, and unsupported anyways):

@tanstack/react-query (the previous major version works)
@tanstack/forms
@xstate/react
zustand v5
valtio
@mantine/core
...

Recently, Microsoft released a survey about updating the toolchain, and I have high hopes that this will lead to progress.

Steve Beaugé (@stevebeauge)

Steve Beaugé (@stevebeauge) said:

React 17 has been released without introducing new features, focusing instead on providing an easier upgrade path for future versions.

from React v17.0 release announcement

React v17 has been out since October 2020... SPFx already supports React v17.

React v19 was just released last week (DEC 5, 2024) and it DOES introduce a LOT of new stuff.

https://react.dev/blog/2024/12/05/react-19

What I meant is that moving from react 17 to 18 shouldn't be an issue.
Probably same for react 19

Steve Beaugé (@stevebeauge)

Steve Beaugé (@stevebeauge), Would you mind sharing what you modified in the toolchain to allow you to use React 18 for testing? Some of the tools that I regularly use with SPFx have started dropping support for React < 18, and it's absurd how infrequently Microsoft updates their dependencies, especially with how quickly development moves on the web now.

Steve Beaugé (@stevebeauge)

Steve Beaugé (@stevebeauge), Would you mind sharing what you modified in the toolchain to allow you to use React 18 for testing? Some of the tools that I regularly use with SPFx have started dropping support for React < 18, and it's absurd how infrequently Microsoft updates their dependencies, especially with how quickly development moves on the web now.

Reginald Johnson (@LastGunslinger): here's how I did it, but before providing the steps, you have to understand that this is very experimental (not tested in production). If you still want to go into this direction you are likely to encounter compatibility issue (spfx fast serve for example), and you won't get any support neither by MS nor by me.

That said, the trick consists in two steps : install the proper version of react (18.2 by the time I tested, don't know if it will work with react 19) and then ensure the webpack config does not exclude react (since it's available in the page, the react* are marked as external).

Ensure the proper version of react is installed in your project:

package.json:

"dependencies": {
        "react": "18.2.0",
        "react-dom": "18.2.0"
    },
    "devDependencies": {
        "@types/node": "16.18.54",
        "@types/react": "18.2.67"
    }

Ensure dependencies are not complaining regarding react as peer dep. Not sure if it's actually required, but I relied on pnpm override feature:

package.json:

    "pnpm": {
        "overrides": {
            "react": "18.2.0",
            "react-dom": "18.2.0",
            "@types/react": "18.2.67",
            "@types/react-dom": "18.2.22"
        }
    }

Fix the webpack config to not mark react as external. This will, your version of react will be bundled into your webpart (increase bundle size)

gulpfile.js:

 build.configureWebpack.mergeConfig({
        additionalConfiguration: (generatedConfiguration) => {

            // Remove react and react-dom from externals to allow embedding react 18 inside the bundle
            if (Array.isArray(generatedConfiguration.externals)) {
                console.log("🐱‍👤 Removed react and react-dom from externals");

                // remove "react" and "react-dom" from externals
                generatedConfiguration.externals = generatedConfiguration.externals.filter(
                    (external) => external !== "react" && external !== "react-dom",
                );
            }

            return generatedConfiguration;
        },
    });

Fix the way webparts are rendered (should be similar using other kind of SPFX artefact, since the entry point is providing the DOM element, and you are responsible for populating it.

HelloWorldWebPart.tsx:

import * as React from "react";
import { createRoot, type Root } from "react-dom/client";



export default class HelloWorldWebPart extends BaseClientSideWebPart<{}> {
    private _root: Root | undefined;

    protected get dataVersion(): Version {
        return Version.parse("1.0");
    }

    public render(): void {

        const node = (
            <React.StrictMode>
                {/* your components ... */ }
            </React.StrictMode>
        );

        this._root = createRoot(this.domElement);
        this._root.render(node);

        //ReactDom.render(node, this.domElement);
    }


    protected onDispose(): void {
        // ReactDom.unmountComponentAtNode(this.domElement);
        this._root?.unmount();
    }

    protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
        return {
            pages: [],
        };
    }
}

This way you should be able to load react 18 components.

Steve Beaugé (@stevebeauge)

Steve Beaugé (@stevebeauge) Thanks for the info!

@stevebeauge said:

React v19 was just released last week (DEC 5, 2024) and it DOES introduce a LOT of new stuff.

So what progress in updating SPFx to React 19?

it's already march/april and spfx 1.21 is in public preview and they are still focusing on viva connections instead of upgrading the toolings..

Nicholas Hendrickson (@NicholasHendrickson)

Hello Nicholas Hendrickson (@NicholasHendrickson),
Thank you for bringing this issue to our attention. We will look into it and get back to you shortly.

I really hope they go straight to React 19. Its seriously idiotic to move to 18 by now.

OMG. Seems we are stuck in a doom loop of:

SPO can't switch to a new React without the risk of breaking all the SPFx that's out there
SPFx can't switch to a new React because of SPO

So we will be on React 17 forever. Someone please tell me I'm wrong. Also how did they manage the move from 16-17 when SPFx 1.16 was released?

From react 17 releases notes

No New Features

The React 17 release is unusual because it doesn’t add any new developer-facing features. Instead, this release is primarily focused on making it easier to upgrade React itself.

In particular, React 17 is a “stepping stone” release that makes it safer to embed a tree managed by one version of React inside a tree managed by a different version of React.

It also makes it easier to embed React into apps built with other technologies.

That suggests moving from react 16 to react 17 is straightforward and should occurs compatibility issues.

That also suggests we should be able to have multiple version of react inside the page, and that bringing our own copy of react should not be an issue. Except for the "supported path" of SPFx.

Vesa Juvonen (@VesaJuvonen)

Vesa Juvonen (@VesaJuvonen) i think we should bring some priority to this.

I agree that this should be a priority for the SPFx maintainers, but you can use a different version of React with SPFx, my organization has been using React 18 in production for over a year now, and I'm planning to move to React 19 next month. The only real downside is that your bundle size increases because you need to include the react and react-dom libraries, but we found that the positives outweighed the negatives for us.

To do it, you just need to update your Webpack config to remove react and react-dom from Webpack's externals array. I just recently also upgraded to SPFx 1.22.0, and here is the wepack patch file that we are using with Heft:

'use strict'

function modifyWebpackConfig(webpackConfig) {
	if (Array.isArray(webpackConfig.externals)) {
		webpackConfig.externals = webpackConfig.externals.filter(
			(external) => external !== 'react' && external !== 'react-dom'
		)
	}
}

module.exports = modifyWebpackConfig

That's it, now we can install any version of React that we like, and our SPFx apps will use that one instead of 17.

EDIT: This is also available in SPFx versions < 1.22 and it works the same, this is just something that needs to be added to your gulpfile.js instead.

Reginald Johnson (@LastGunslinger)

Reginald Johnson (@LastGunslinger) Would be nice for all community if you can upload like a hello world spfx solution how to use react 18 or 19. Then we can continue working with new frameworks while they decide what to do. Thanks

#9918 (comment)

Unless there's concrete proof this breaks something, I think we're all going to have to do this to keep our security inspectors happy - it's a trade-off between "might break something" vs "is definitely a security risk"...

Rubén Toribio Gallardo (@Rtoribiog)

Rubén Toribio Gallardo (@Rtoribiog) I got busy with the holidays and everything, but I took your advice and created a HelloWorld example that is using React 19. The majority of the code is pretty boilerplate, but the primary difference is in config/webpack-patch/react-webpack-patch.js, where we need to remove react and react-dom from the externals array so that they are not excluded from the bundle:

'use strict'

function modifyWebpackConfig(webpackConfig) {
	// Remove react and react-dom from webpack's externals array to ensure they are included in the bundle
	if (Array.isArray(webpackConfig.externals)) {
		webpackConfig.externals = webpackConfig.externals.filter(
			(external) => external !== 'react' && external !== 'react-dom'
		)
	}
}

export default modifyWebpackConfig

Other than that, everything is pretty much the same, but probably a bit different stylistically than what you would get from the Yeoman generator since I used my own internal tooling to generate the skeleton. Obviously I can't provide any support or guarantees for this, but we have been using this in production with React 18 for over a year, with a plan to migrate to React 19 in the next quarter. I also believe that since Microsoft has moved away from using the Rushstack compiler that it would also be possible to use newer versions of TypeScript as well, but that isn't something that we need right now since SPFx 1.22 bumped the supported the TS version to 5.8.3, which is fine for me right now.

Reginald Johnson (@LastGunslinger)

Thanks Reginald Johnson (@LastGunslinger) really appreaciate it. Will take a look to implement it in our projects

Hi! Thanks for keeping this issue open.

Looking at the current SPFx roadmap, React 18 is still mentioned as work in progress, but it is no longer listed as part of a specific SPFx release.

While reviewing earlier versions of the roadmap, I found an archived copy from May 2026:

At that time, SPFx 1.24 explicitly listed:

React 18 support for SPFx solutions

Since SPFx 1.24 has now been released and React 18 is no longer associated with a specific version in the roadmap, I was wondering whether there are any updates that can be shared regarding its current status.

Many of us are currently evaluating workarounds or unsupported approaches in order to use modern React libraries, so any guidance would be greatly appreciated.

Thank you.

React 18 (with Node.js 26) support was delivered as part of the 1.24 in October 2026.

Way overdue - but better late than never ✅

Navigation Menu

Repository navigation

Support for React 18 #9918

What type of issue is this?

What SharePoint development model, framework, SDK or API is this about?

Target SharePoint environment

What browser(s) / client(s) have you tested

Additional environment details

Issue description

No New Features

33 remaining items

No New Features

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Support for React 18 #9918

Description

What type of issue is this?

What SharePoint development model, framework, SDK or API is this about?

Target SharePoint environment

What browser(s) / client(s) have you tested

Additional environment details

Issue description

Activity

andrewconnell commented on Sep 14, 2024

smolattack commented on Sep 17, 2024

DakotaWray2 commented on Nov 4, 2024

stevebeauge commented on Dec 13, 2024

No New Features

andrewconnell commented on Dec 13, 2024

stevebeauge commented on Dec 13, 2024

LastGunslinger commented on Jan 5, 2025

stevebeauge commented on Jan 7, 2025

LastGunslinger commented on Jan 7, 2025

Snakemonster commented on Jan 18, 2025

jonathanhotono commented on Mar 31, 2025

Ashlesha-MSFT commented on Apr 18, 2025

33 remaining items

pcostarg commented on Nov 17, 2025

anthonywhite commented on Dec 17, 2025

stevebeauge commented on Dec 17, 2025

No New Features

Rtoribiog commented on Dec 17, 2025

LastGunslinger commented on Dec 17, 2025

Rtoribiog commented on Dec 18, 2025

anthonywhite commented on Dec 18, 2025

LastGunslinger commented on Jan 6, 2026

Rtoribiog commented on Jan 7, 2026

MKS2508 commented on Jul 13, 2026

VesaJuvonen commented on Nov 1, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions