Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
2 of 9 tasks
oharveyCloudwell opened this issue Oct 7, 2022 · 7 comments
Closed
2 of 9 tasks
Labels
area:spfx Category: SharePoint Framework (not extensions related) react-17 type:bug-suspected Suspected bug (not working as designed/expected). See “type:bug-confirmed” for confirmed bugs.

Comments

@oharveyCloudwell
Copy link

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.

@oharveyCloudwell oharveyCloudwell added the type:bug-suspected Suspected bug (not working as designed/expected). See “type:bug-confirmed” for confirmed bugs. label Oct 7, 2022
@ghost
Copy link

ghost commented Oct 7, 2022

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

@ghost ghost added the Needs: Triage 🔍 Awaiting categorization and initial review. label Oct 7, 2022
@AJIXuMuK
Copy link
Collaborator

AJIXuMuK commented Oct 7, 2022

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

@AJIXuMuK AJIXuMuK added area:spfx Category: SharePoint Framework (not extensions related) react-17 and removed Needs: Triage 🔍 Awaiting categorization and initial review. labels Oct 7, 2022
@oharveyCloudwell
Copy link
Author

@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
Copy link
Author

@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
Copy link
Collaborator

AJIXuMuK commented Oct 7, 2022

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

@oharveyCloudwell
Copy link
Author

oharveyCloudwell commented Oct 7, 2022

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

@ghost
Copy link

ghost commented Oct 14, 2022

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

@ghost ghost locked as resolved and limited conversation to collaborators Oct 14, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area:spfx Category: SharePoint Framework (not extensions related) react-17 type:bug-suspected Suspected bug (not working as designed/expected). See “type:bug-confirmed” for confirmed bugs.
Projects
None yet
Development

No branches or pull requests

2 participants