SharePoint React 17 Upgrade causing "Invalid Hook call" error in SPFx Webpart

[oharveyCloudwell]

Target SharePoint environment

SharePoint Online

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

💥 SharePoint Framework

Developer environment

Windows

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

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

Additional environment details

-Node Version: 8.11.3
-SPFx: 1.8.0

Describe the bug / error

A SPFx webpart that has been in use for quite a long time recently started to error with React error:

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

WHen checking the version of react running on the SharePoint Online page, it's showing 17.0.1. The webpart still works correctly on other tenants with React 16.x. In other issues, it has been suggest that we update our imports to no longer use @microsoft/sp-extension-base, but we are not usign that anywhere in our project directly. However, @microsoft/sp-webpart-base does use this package, and is present in our project.

Steps to reproduce

Here are the packages we are using:

"dependencies": {
"@microsoft/sp-core-library": "1.8.0",
"@microsoft/sp-lodash-subset": "1.8.0",
"@microsoft/sp-office-ui-fabric-core": "1.8.0",
"@microsoft/sp-property-pane": "1.8.0",
"@microsoft/sp-webpart-base": "1.8.0",
"@pnp/common": "^1.3.2",
"@pnp/graph": "^1.3.2",
"@pnp/logging": "^1.3.2",
"@pnp/odata": "^1.3.2",
"@pnp/spfx-property-controls": "^1.14.1-beta.bf95c11",
"@types/es6-promise": "0.0.33",
"@types/react": "16.4.2",
"@types/react-dom": "16.0.5",
"@types/webpack-env": "1.13.1",
"office-ui-fabric-react": "5.132.0",
"react": "16.7.0",
"react-dom": "16.7.0"
},
"resolutions": {
"@types/react": "16.4.2"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-2.9": "^0.10.9",
"@microsoft/sp-build-web": "1.8.0",
"@microsoft/sp-tslint-rules": "1.8.0",
"@microsoft/sp-module-interfaces": "1.8.0",
"@microsoft/sp-webpart-workbench": "1.8.0",
"@microsoft/rush-stack-compiler-2.7": "0.4.0",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
}

Expected behavior

Any help to get this loading again is appreciated.

[ghost]

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

[AJIXuMuK]

@oharveyCloudwell - thank you for reporting this one.
Few questions:

• are you using imports from @microsoft/office-ui-fabric-react-bundle? It is a shadow dependency, so even if you don't have it in the package.json it still can be used.
• Are you using PropertyPaneToggle component with label property set to React element?
• What components are you using from @pnp/spfx-property-controls?
• Do you have any code that uses SPComponentLoader directly?

[oharveyCloudwell]

@AJIXuMuK , thanks for the help. We did find a reference to @microsoft/office-ui-fabric-react-bundle after all. I'm not sure why we didn't find it in our original searches. Thanks for the help.

[oharveyCloudwell]

@AJIXuMuK , we also found a PropertyPaneToggle with a react element for the label property. According to documentaiton, this should be allowed, but it also seems to break things. Is this currently a bug, or is there guidance as to why it's not working?

PropertyPaneToggle("showCurrentUserCalendar", { label: React.createElement(Stack, { tokens: { padding: "0 0 2px 0" }, children: currentUserLabelChildren })

This is the code that currently causes a react error. If we switch label to just a string, it works. THis is only an issue on SharePoint tenants that are React 17.

[AJIXuMuK]

@oharveyCloudwell - yes, Toggle with React element in label is another issue we're aware of, and we're currently working on it.

[oharveyCloudwell]

Ok, thank you. We have reverted it to a string for now.

[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