React version mismatch causing SPFX list extensions to fail in O365

[teresahoes]

Starting yesterday around midday US time, one of our existing spfx list extensions stopped working within a modern SP site/document library. It is affecting all of our document libraries where this extension is installed. Also of note the code for these extensions has not changed for months.

Here is the error reported in the browser console:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app.

When i check the react version on the page it is 17.0.1. - my understanding is that the current version of React with spfx should be 16.x

Here are my versions in my package.json

"dependencies": {
"@microsoft/decorators": "1.13.0",
"@microsoft/sp-core-library": "1.13.0",
"@microsoft/sp-dialog": "1.12.1",
"@microsoft/sp-extension-base": "^1.13.0",
"@microsoft/sp-listview-extensibility": "1.13.0",
"@microsoft/sp-lodash-subset": "1.13.0",
"@pnp/sp": "^2.6.0",
"@pnp/telemetry-js": "^2.0.0",
"office-ui-fabric-react": "7.174.1",
"react": "16.13.1",
"react-dom": "16.13.1"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-3.7": "0.2.3",
"@microsoft/rush-stack-compiler-3.9": "0.4.47",
"@microsoft/sp-build-web": "1.13.0",
"@microsoft/sp-module-interfaces": "1.13.0",
"@microsoft/sp-tslint-rules": "1.13.0",
"@types/chai": "3.4.34",
"@types/es6-promise": "0.0.33",
"@types/mocha": "2.2.38",
"@types/node": "^14.17.4",
"@types/react": "16.9.51",
"@types/react-dom": "16.8.3",
"@types/webpack-env": "1.13.1",
"ajv": "~5.2.2",
"gulp": "~4.0.2"
}

[AJIXuMuK]

Hello @teresahoes,

Could you please "align" your dependencies and try again?
You have most of SPFx dependencies set to 1.13.0.

But you have sp-dialog set to 1.12.1, and you have sp-extension-base set to ^1.13.0 which will load 1.15.2.

Could you please update thses 2 dependencies to be:

"@microsoft/sp-dialog": "1.13.0",
"@microsoft/sp-extension-base": "1.13.0",

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

Also, could you please provide the details of your component's implementation.
Are you just opening a dialog from sp-dialog with some custom content in there or is there anything else?

[teresahoes]

Hi @AJIXuMuK - i tried updating the dependencies as suggested but get the same error. Here is the stack trace if its helpful:

The React error when decoded is still the same:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

[teresahoes]

The dialog box displays a drop down and a couple of text fields. Data is loaded via an http call which is used in rendering the content. I am not using hooks in this implementation, rather setting state the old way. I'd be happy to privately share the solution if it would help.

[AJIXuMuK]

@teresahoes - thank you!
Would be nice if you could share the solution. You can email it to aterentiev@microsoft.com, or share a git repo with me.
Thanks!

[teresahoes]

just one correction. i just noticed that the project is throwing errors related to updating the spdialog version to 1.13 - many missing properties. that must be why i hadn't updated it in the past - probably didnt have time to deal with the breaking changes, but i will note it has been working fine with that version :) i reset that back to 1.12.1 leaving the sp-extension-base at 1.13.0. I will send you the package shortly to your email. thanks!

[teresahoes]

@AJIXuMuK - FYI the solution should be in your email. I also was able to update the spdialog package to 1.13.1 - this was the issue i was facing with 1.13.0 #7431

However, none of that has resolved the mismatch with react. thanks!

[AJIXuMuK]

@teresahoes - seems like the email is blocked by som epolicies.
I've just invited you to my private repo on GH.
Could you add your solution there?

https://github.com/AJIXuMuK/code-sharing

It is shared only for you, no one else will have access to it

[teresahoes]

okay @AJIXuMuK -- i have uploaded the solution files to that repo.

[AJIXuMuK]

@teresahoes - thanks!

In the code I see this:

import { Label } from '@microsoft/office-ui-fabric-react-bundle';

Could you please replace it with

import { Label } from 'office-ui-fabric-react';

This will solve your issue

[teresahoes]

yes! that has fixed the issue. thank you very much!

[oharveyCloudwell]

Hi @AJIXuMuK , I'm here from the other thread that you closed. We also found this thread in our searches,, but it does not apply to our issue. We have existing code that was working until today that suddenly stopped working. Additionally, we download our sppkg file and uploaded it to a separate tenant, and it worked without issue.

[AJIXuMuK]

@oharveyCloudwell - please, open a separate issue then and describe what you're experiencing.
Also, check if you have import from @microsoft/office-ui-fabric-react-bundle.

[oharveyCloudwell]

I have checked. We have no imports from that package.

[SharePickle]

We're experiencing the same issue - React version shows as 17.0.1.
Updating React to version 17 fixes it, but breaks everything on the tenants with React 16.x.x.
According to https://learn.microsoft.com/en-us/sharepoint/dev/spfx/compatibility we're not supposed to use version 17.

[AJIXuMuK]

@SharePickle
Check if you have import from @microsoft/office-ui-fabric-react-bundle.

[SharePickle]

@SharePickle Check if you have import from @microsoft/office-ui-fabric-react-bundle.

Same, we're not using @microsoft/office-ui-fabric-react-bundle.
But we however using WebPartTitle from sp-webpart-shared module which has @microsoft/office-ui-fabric-react-bundle as dependency.

[AJIXuMuK]

@SharePickle - what is sp-webpart-shared?
There is no public SPFx module with such a name

[oharveyCloudwell]

@AJIXuMuK , investigating our project shows we are using @microsoft/sp-property-pane, which references @microsoft/office-ui-fabric-react-bundle. Isn't that a valid SPFx module? Is there an SPFx property pane module that doesn't reference the @microsoft/office-ui-fabric-react-bundle package?

[AJIXuMuK]

@oharveyCloudwell - please, open a separate bug and describe your problem in there.

[ekdegerman]

@teresahoes - thanks!

In the code I see this:

import { Label } from '@microsoft/office-ui-fabric-react-bundle';

Could you please replace it with

import { Label } from 'office-ui-fabric-react';

This will solve your issue

@AJIXuMuK Thanks for this solution! One of our components suddenly stopped working as the tenant was moved to react 17 and it turns out this incorrect reference was the reason!

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues