-
Notifications
You must be signed in to change notification settings - Fork 1k
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
Comments
Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible. |
@oharveyCloudwell - thank you for reporting this one.
|
@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. |
@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?
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. |
@oharveyCloudwell - yes, Toggle with React element in label is another issue we're aware of, and we're currently working on it. |
Ok, thank you. We have reverted it to a string for now. |
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 |
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
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.
The text was updated successfully, but these errors were encountered: