Sp-dev-docs: Fails and error after upgrading SPFX webpart project with latest versions SPFX, React and Office UI Fabric react

[arunakshi]

• [x] Bug

Describe the bug

I had a SPFX webpart project with version 1.9.1 which was working fine without problems. I upgraded my SPFX version to 1.10.0 and also upgraded react and office UI fabric react modules also to latest versions. I was getting errors while loading the webpart with following errors in Workbench.
'https://localhost:4321/node_modules/react/dist/react.js' for resource 'react' in component 'f6002525-c701-4bc1-9b52-7b692e208efd' (PinnedNewsWebPart). The file was not found in the server.

After checking few posts, I removed my package-lock.json and also removed my node_modules folder and tried to do npm install and I am getting following warnings and errors:

npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected].
npm WARN deprecated [email protected]: not actively maintained anymore
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm WARN deprecated [email protected]: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Visit <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of [email protected] ERR! code ETARGET
npm ERR! notarget No matching version found for @uifabric/icons@^7.3.6.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'office-ui-fabric-react'
npm ERR! notarget

npm ERR! A complete log of this run can be found in:

Steps to reproduce

Upgrade project with latest versions of following packages with the following command:

npm install @microsoft/sp-core-library@latest @microsoft/sp-lodash-subset@latest @microsoft/sp-office-ui-fabric-core@latest @microsoft/sp-webpart-base@latest @types/react@latest @types/react-dom@latest office-ui-fabric-react@latest react@latest react-dom@latest

package.json

Here it is how it looks like my package.json at the end:
"version": "0.0.1",
"private": true,
"main": "lib/index.js",
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "^1.10.0",
"@microsoft/sp-lodash-subset": "^1.10.0",
"@microsoft/sp-office-ui-fabric-core": "^1.10.0",
"@microsoft/sp-webpart-base": "^1.10.0",
"@pnp/sp": "^2.0.2",
"@pnp/spfx-controls-react": "1.16.0",
"@types/react": "^16.9.19",
"@types/react-dom": "^16.9.5",
"@types/webpack-env": "^1.15.1",
"office-ui-fabric-react": "^7.90.1",
"react": "^16.12.0",
"react-device-detect": "^1.11.14",
"react-dom": "^16.12.0",
"react-responsive-carousel": "^3.1.51"
},
"resolutions": {
"@types/react": "16.9.19"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-2.9": "^0.10.3",
"@microsoft/sp-build-web": "^1.10.0",
"@microsoft/sp-module-interfaces": "^1.10.0",
"@microsoft/sp-tslint-rules": "^1.10.0",
"@microsoft/sp-webpart-workbench": "^1.10.0",
"@types/chai": "^4.2.8",
"@types/mocha": "^7.0.1",
"ajv": "^6.11.0",
"gulp": "^3.9.1"
}

I am not able to compile my project and getting lot of errors now. What is the supported version of React and Office UI Fabric React recommended for SPFX latest version?

Does anyone has same issue ? Can anyone please suggest how can i solve the issue please?

[msft-github-bot]

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

[giaduyle]

I have had the same issue.

The following error keeps poping up no matter what I tried:
npm ERR! notarget No matching version found for @uifabric/icons@^7.3.6.

I tried following methods:

• Reduced office-ui-fabric-react to lowest version 7.0.2
• npm init uifabric && npm install

My environment:

• OS: Windows 10 64bit
• NodeJs: 12.15.0
• npm: 6.13.4

[nbenje1]

+1
Looking for Icons@^7.3.6 and only 7.3.5 are available. Wish I could get this installed today.

[mjarmstrong]

+1 - same issue.

[AliquotSolutions]

+1 - same issue

[bcameron1231]

It seems like this is related to the bug over on the Office-UI-Fabric-React Repo. ?
https://github.com/OfficeDev/office-ui-fabric-react/issues/11918

[dabanks]

Had the same issue, failed with 6.189 (which I think I the supported spfx version) worked with 7.89 but failed again with latest build

[dzearing]

This should now be resolved. We backed the latest tag to the previous release this morning. NPM had a publishing outage which broke the publishing process. We've since republished things, should be good to go.

[KevinTCoughlin]

Thanks @dzearing and crew for promptly fixing!

[arunakshi]

Thank you dzearing and the Team for Fixing this. We should get latest Version of Office UI Fabric React now and that should fix this issue Right?

[msft-github-bot]

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