Support for React 18

[NicholasHendrickson]

trafficstars

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

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [ ] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [X] not applicable
• [ ] other (enter in the "Additional environment details" area below)

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!

[andrewconnell]

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

[smolattack]

Vesa's team don't care. https://github.com/SharePoint/sp-dev-docs/issues/8715 https://github.com/SharePoint/sp-dev-docs/issues/9263 https://github.com/SharePoint/sp-dev-docs/issues/9463

[DakotaWray2]

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.

[stevebeauge]

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, @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.

[andrewconnell]

@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

[stevebeauge]

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

[LastGunslinger]

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

[stevebeauge]

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

@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).

1. 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"
    }

2. 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"
        }
    }

3. 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;
        },
    });

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

[LastGunslinger]

@stevebeauge Thanks for the info!

[Snakemonster]

@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?

[jonathanhotono]

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

[Ashlesha-MSFT]

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

[Ashlesha-MSFT]

@NicholasHendrickson, Just checking in to see if your original question about React 18 support in SPFx has been answered to your satisfaction based on the ongoing discussion and shared workarounds.

If so, we’re happy to close this issue.

[stopacio]

@NicholasHendrickson, Just checking in to see if your original question about React 18 support in SPFx has been answered to your satisfaction based on the ongoing discussion and shared workarounds.

If so, we’re happy to close this issue.

I'm not the owner but I don't think the question was answered.

I see that 1.21 is upgrading to TypeScript 5 and Node.jsv22, but will we ever get to the latest version of React in a reasonable timeframe? Or will we always be 5+ years behind?

[smolattack]

@NicholasHendrickson, Just checking in to see if your original question about React 18 support in SPFx has been answered to your satisfaction based on the ongoing discussion and shared workarounds. If so, we’re happy to close this issue.

I'm not the owner but I don't think the question was answered.

I see that 1.21 is upgrading to TypeScript 5 and Node.jsv22, but will we ever get to the latest version of React in a reasonable timeframe? Or will we always be 5+ years behind?

They upgraded TypeScript to 5.3.3 which was released in 2023. These people aren't serious.

[Rtoribiog]

@VesaJuvonen @Ashlesha-MSFT hello any progress on that? we are not able to use the latest UI components because it's required to use react 18. We need spfx to support react 18 version. The issue cannot be closed Thanks

[NicholasHendrickson]

@NicholasHendrickson, Just checking in to see if your original question about React 18 support in SPFx has been answered to your satisfaction based on the ongoing discussion and shared workarounds.

If so, we’re happy to close this issue.

Hey,

Sorry for the delay. I would say no, I wouldn't consider the question answered to my satisfaction. The question isn't necessarily "is it possible for me to use a work around to get a modern version of React to work in SPFx"; it's whether or not there is an ETA and/or any plans to support React 18 (or later versions).

I would say the issue should be kept open until either a newer version of React is supported OR until leadership is able to provide a definitive answer to the question. Additionally, I've seen similar questions be opened and then closed over time, so having this issue remain opened to serve as a primary place for people to pile in probably doesn't hurt.

I do appreciate everyone's responses and the aforementioned work arounds though!

[Rtoribiog]

@stevebeauge it's the workaround still working. Have you went further with testing? just to be sure if it's ok to go further with it or abandon it. Thanks

[stevebeauge]

@stevebeauge it's the workaround still working. Have you went further with testing? just to be sure if it's ok to go further with it or abandon it. Thanks

I never pushed further. I only used react 18 in a small prototype. I our use cases, we were able to stick with react 17 by taking older versions of react libs. In particular, we are using tanstack react query v4 a lot, while v5 is available, but require react 18. Fluentui 8/9 do not require react 18. A few other libs we are using are working with react 17.

Forcing react 18 may work, but you'll end in an unsuported state. Does it worth?

[Rtoribiog]

@stevebeauge it's the workaround still working. Have you went further with testing? just to be sure if it's ok to go further with it or abandon it. Thanks

I never pushed further. I only used react 18 in a small prototype. I our use cases, we were able to stick with react 17 by taking older versions of react libs. In particular, we are using tanstack react query v4 a lot, while v5 is available, but require react 18. Fluentui 8/9 do not require react 18. A few other libs we are using are working with react 17.

Forcing react 18 may work, but you'll end in an unsuported state. Does it worth?

that's something we are going to evaluate, but just wanna know. Thanks for reply

[Rtoribiog]

hello @Ashlesha-MSFT is there any progress on that? is there any change to have it in new spfx version? @VesaJuvonen

We are not able to use latest version of components due this issue

[zreecespieces]

@Ashlesha-MSFT My team has an application that's currently a custom SPFx webpart and we're working to deploy it as a native Teams app scaffolded with the Teams Toolkit. The teams toolkit (M365 agent toolkit as I believe it's now being called) is using React 18 which is causing incompatibility issues preventing us from getting it deployed in both environments even though we've abstracted the main application logic. This is a big blocker.

[chetan-d-mahajan]

@Ashlesha-MSFT @VesaJuvonen Do we have any update or progress on this topic? Many of the modern UI applications rely on React 18+ library and in absence of its support, we are kind of blocked. Any positive news on this would be highly appreciated.

[ilja-shevelyov]

@Ashlesha-MSFT Very keen to find out if there are any updates regarding this. We're blocked in every direction in trying to develop modern apps/webparts for SharePoint. Custom scripting is now blocked. Most, if not all, libraries have moved on from React 17, years ago.

It's a hefty exercise to have to upgrade everything over to React 19, so we're holding off from starting development in the current ecosystem.

We would greatly appreciate any update regarding this, so we can appropriately plan the best course of action.

[Ashlesha-MSFT]

@ilja-shevelyov, We completely understand your concern and the impact this is having on your development planning. As of now, there’s no update from the engineering team, but we’ve already tagged the relevant contacts and are actively awaiting their response.

We’ll be sure to share any information as soon as we hear back. Really appreciate your patience in the meantime.

[Rtoribiog]

@Ashlesha-MSFT we need to have a timeline or deadline for that. It should be top priority update toolchain rather than adding more features

[ilja-shevelyov]

@Ashlesha-MSFT we need to have a timeline or deadline for that. It should be top priority update toolchain rather than adding more features

I concur.

There needs to be escalation to prioritise this issue, and we need timelines so that we may better plan our development schedules. Microsoft has given developers no choice but to use SPFx, therefore it should be its responsibility to ensure that it is maintained regularly.

[vkarampinis]

@Ashlesha-MSFT , @VesaJuvonen ,

I strongly agree with the other developers that updating the SPFx toolchain to support the latest versions of React should be a top priority for Microsoft. The lack of React 18 (and now React 19) support is severely hampering our ability to build modern, high-quality applications for SharePoint and Teams.

We are being forced to either use outdated libraries and components or resort to experimental workarounds that are unsupported and introduce compatibility issues. This is unacceptable, especially given that SharePoint is a platform that many organizations rely on for critical business applications.

I urge you to escalate this issue within Microsoft and provide a clear timeline for when we can expect React 18 (and later) support in the SPFx toolchain. Developers need this information to properly plan their roadmaps and ensure they can leverage the latest web technologies.

Updating the toolchain should take precedence over adding new features. Falling multiple versions behind is simply not sustainable.

Please provide an update on the status of this issue and the plans to address it.

[Rtoribiog]

in our case we had to stop a project, because not able to use latest version of react components and we had to build all the ui from scratch ourselves, making us waste weeks of our time, until react 18-19 is supported. Then we will need to throw it away

[stopacio]

Supposedly React 18 is coming in 1.22 + the gulp replacement, Heft? via the SPFx community call