React version mismatch causes property pane not displaying

[manipk]

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

• browser version (Google Chrome Version 106.0.5249.91 (Official Build) (x86_64))
• SPFx version (1.13.1)
• Node.js version (16.13.1)

Describe the bug / error

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
Pacakge.json
{
"name": "lwb-intranet-apps",
"version": "1.1.0",
"private": true,
"main": "lib/index.js",
"scripts": {
"build-prod": "cross-env NODE_ENV=PRODUCTION gulp bundle --ship && gulp package-solution --ship",
"build-uat": "cross-env NODE_ENV=UAT gulp bundle --ship && gulp package-solution --ship",
"build-dev": "cross-env NODE_ENV=DEVELOPMENT gulp bundle --ship && gulp package-solution --ship",
"build-local": "gulp clean && cross-env NODE_ENV=DEVELOPMENT gulp bundle --ship && gulp package-solution --ship && explorer .\sharepoint\solution",
"clean": "gulp clean",
"test": "jest --config=tests/jest.config.json",
"lint": "eslint .",
"lint-fix": "eslint --fix .",
"serve": "cross-env NODE_ENV=DEVELOPMENT gulp bundle --custom-serve --max_old_space_size=8192 && fast-serve",
"new-webpart": "(git diff --exit-code --quiet || (echo 'git not clean, commit all changes and try again' && exit 1)) && yo @microsoft/sharepoint --skip-install --component-type webpart --framework react && echo reverting package.json && git checkout package.json"
},
"dependencies": {
"@microsoft/microsoft-graph-types": "^2.6.0",
"@microsoft/sp-component-base": "1.13.1",
"@microsoft/sp-core-library": "1.13.1",
"@microsoft/sp-lodash-subset": "1.13.1",
"@microsoft/sp-office-ui-fabric-core": "1.13.1",
"@microsoft/sp-property-pane": "1.13.1",
"@microsoft/sp-webpart-base": "1.13.1",
"@pnp/sp": "^2.9.0",
"@pnp/spfx-controls-react": "3.11.0",
"cross-env": "^7.0.3",
"date-fns": "^2.23.0",
"fuse.js": "^6.4.6",
"office-ui-fabric-react": "7.174.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-quill": "^1.3.5",
"react-sortablejs": "6.1.1",
"react-youtube": "^7.13.1",
"sortablejs": "^1.14.0",
"typescript": "^4.3.5"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-3.9": "^0.5.0",
"@microsoft/sp-build-web": "^1.15.2",
"@microsoft/sp-module-interfaces": "1.13.1",
"@microsoft/sp-tslint-rules": "1.13.1",
"@types/enzyme": "3.10.12",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/jest": "24.9.1",
"@types/react": "16.9.51",
"@types/react-dom": "16.9.8",
"@types/sortablejs": "^1.10.7",
"@types/webpack-env": "1.15.0",
"@typescript-eslint/eslint-plugin": "^4.33.0",
"@typescript-eslint/parser": "^4.33.0",
"ajv": "5.2.5",
"enzyme": "3.11.0",
"enzyme-adapter-react-16": "1.15.6",
"enzyme-to-json": "^3.6.2",
"eslint": "^7.32.0",
"eslint-plugin-react": "^7.26.1",
"gulp": "~4.0.2",
"gulp-eslint7": "^0.3.2",
"identity-obj-proxy": "^3.0.0",
"jest": "29.1.2",
"jest-bamboo-reporter": "^1.2.1",
"jest-environment-jsdom": "^29.1.2",
"jest-junit": "14.0.1",
"react-test-renderer": "17.0.2",
"spfx-fast-serve-helpers": "^1.15.3",
"ts-jest": "29.0.3"
}
}

Steps to reproduce

Expected behavior

This spfx package was working in the environment for year or so it started failing since last week wednesday. I followed instruction specified in the #8482 and upgraded the package from [1.12.1] to 1.13.1 which worked on certain webpart properties and now it is failing on few other areas.

[ghost]

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

[AJIXuMuK]

@manipk - have you also removed references of @microsoft/office-ui-fabric-react-bundle, like this:

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

If not - please, do that.

[manipk]

Hi I have removed all the @microsoft/office-ui-fabric-react-bundle from the project. I believe ***@***.***/spfx-property-controls” is the one which aim doubting. I am going to downgrade the version of the control to v2 from v3 to see if that is going to fix the issue Thanks. Regards Mani

…

On 11 Oct 2022, at 11:04 pm, Alex Terentiev ***@***.***> wrote: @manipk <https://github.com/manipk> - have you also removed references of @microsoft/office-ui-fabric-react-bundle, like this: import { Label } from ***@***.***/office-ui-fabric-react-bundle'; If not - please, do that. — Reply to this email directly, view it on GitHub <#8496 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AC2UIALPTCVC2EIDSZEG2NLWCVJVXANCNFSM6AAAAAARBX5GJM>. You are receiving this because you were mentioned.

[manipk]

Hi
I have made the changes to the spfx property controls of pnp react and still no luck.

[AJIXuMuK]

The fix has been rolled out to all the tenants.
Please, double check if the error still exists.
If yes - I will need more details on your solution.
BTW, neither PnP React Controls, nor PnP Property Controls are using office-ui-fabric-react-bundle.

[manipk]

Hi

I still have issues in the webpart screen shot attached. I have also added the screen shot of Package.json and package-lock.json.

Please let me know if you need more information. The React version has been toggling between 17.0.1 and 17.0.2. when i type them in the debug console of the browser.

[AJIXuMuK]

We found one more issue and will be including it in the next rolled out build.
We will not roll back the current build.
So, if the issue is critical for you - replace the import to office-ui-fabric-react.
I recommend doing it anyway as @microsoft/office-ui-fabric-react-bundle will be deprecated in the next beta of SPFx.

[AJIXuMuK]

The fix has been rolled out to 100% prod

[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