Error: Minified React error #321;

pkrsingh86 commented 1 year ago

Target SharePoint environment

SharePoint Online

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

💥 SharePoint Framework

Developer environment

None

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

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

Additional environment details

Google Chrome: Version 118.0.5993.70 (Official Build) (64-bit)
SPFx version: 1.16.1
Node.js version: v14.21.3 (used locally, however issue can't be reproduced locally). It is only when a package is deployed to SharePoint global app catalog
etc

Describe the bug / error

react-dom-17-bundle_none_a9f964bab81dfbb311fc.js:2 Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Steps to reproduce

Field customizer does not load due to above error which occurs intermittently. It is only when a package is deployed to SharePoint global app catalog. Unable to reproduce the issue when run locally

Attached the error Approval-Status-Field-Customizer-Not-Loading

Expected behavior

Field customizer should load normally

ghost commented 1 year ago

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

AJIXuMuK commented 1 year ago

@pkrsingh86 - could you please share your package.json?

Thanks!

pkrsingh86 commented 1 year ago

Hello @AJIXuMuK: { "name": "michelin-igd-spfx-ext", "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/decorators": "1.16.1", "@microsoft/rush-stack-compiler-4.5": "0.2.2", "@microsoft/sp-core-library": "1.16.1", "@microsoft/sp-dialog": "1.16.1", "@microsoft/sp-http": "1.16.1", "@microsoft/sp-listview-extensibility": "1.16.1", "@pnp/common": "2.0.7", "@pnp/logging": "2.0.7", "@pnp/odata": "2.0.7", "@pnp/sp": "2.0.7", "moment": "2.29.4", "@pnp/spfx-controls-react": "1.19.0", "class-transformer": "0.5.1", "office-ui-fabric-react": "7.204.0", "react": "17.0.1", "react-dom": "17.0.1" }, "devDependencies": { "@microsoft/rush-stack-compiler-3.3": "0.3.5", "@microsoft/sp-build-web": "^1.11.0", "@microsoft/sp-module-interfaces": "1.11.0", "@microsoft/sp-tslint-rules": "1.11.0", "@microsoft/sp-webpart-workbench": "1.11.0", "@types/chai": "3.4.34", "@types/es6-promise": "0.0.33", "@types/mocha": "2.2.38", "@types/react": "17.0.53", "@types/react-dom": "17.0.18", "@types/webpack-env": "1.13.1", "@typescript-eslint/eslint-plugin": "5.51.0", "@typescript-eslint/parser": "5.51.0", "ajv": "8.12.0", "eslint": "8.34.0", "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", "gulp": "4.0.2", "gulp-eslint7": "0.3.2", "typescript": "4.5" } }

AJIXuMuK commented 1 year ago

@pkrsingh86 - so, before any other investigation you should make corrections in the referenced packages as currently you are loading completely different versions of packages/frameworks.

Few things that for sure should be changed:

All SharePoint Framework dependencies must have the same version. Currently you're referencing 1.16.0, 1.11.0, ^1.11.0 - the last one is technically 1.18.0.
You are referencing React 17 and Office UI Fabric React 7 but also SPFx controls v1 that are based on React 15 and Office UI Fabric React v5.
you have different versions of rush-stack-compiler referenced.

You can use CLI for Microsoft 365 as a helper to fix the dependencies: https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor

Please, update the project and let me know if that halps to resolve the issue.

pkrsingh86 commented 1 year ago

Thank you @AJIXuMuK: I am verifying the dependencies and will update the project. I will come back if the issue remains

pkrsingh86 commented 1 year ago

Hello @AJIXuMuK I have made the updates based on your recommendation. Could you please review it once again and see if there is still a gap ? Sometime is complicated to follow the following link and derive the best compatibility matrix

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/compatibility

My new package.json { "name": "michelin-igd-spfx-ext", "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/decorators": "1.16.1", "@microsoft/rush-stack-compiler-4.5": "0.2.2", "@microsoft/sp-core-library": "1.16.1", "@microsoft/sp-dialog": "1.16.1", "@microsoft/sp-http": "1.16.1", "@microsoft/sp-listview-extensibility": "1.16.1", "@pnp/common": "2.0.7", "@pnp/logging": "2.0.7", "@pnp/odata": "2.0.7", "@pnp/sp": "2.0.7", "@pnp/spfx-controls-react": "3.15.0", "class-transformer": "0.5.1", "gulp": "^4.0.2", "moment": "2.29.4", "office-ui-fabric-react": "7.204.0", "react": "17.0.1", "react-dom": "17.0.1" }, "devDependencies": { "@microsoft/rush-stack-compiler-4.5": "0.2.2", "@microsoft/sp-build-web": "1.16.1", "@microsoft/sp-module-interfaces": "1.16.1", "@types/chai": "3.4.34", "@types/es6-promise": "0.0.33", "@types/mocha": "2.2.38", "@types/react": "17.0.1", "@types/react-dom": "17.0.1", "@types/webpack-env": "1.13.1", "@typescript-eslint/eslint-plugin": "5.51.0", "@typescript-eslint/parser": "5.51.0", "ajv": "8.12.0", "eslint": "8.34.0", "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", "gulp": "4.0.2", "gulp-eslint7": "0.3.2", "typescript": "4.5" } }

AJIXuMuK commented 1 year ago

@pkrsingh86 - you should not have "@microsoft/rush-stack-compiler-4.5": "0.2.2", in the dependencies list, in devDependencies only. Other than that it looks fine

pkrsingh86 commented 1 year ago

@AJIXuMuK: I saw the issue back again this morning even with good compatibility versions. To be more precise, we have performed the following:

Any more ideas?

Here is the latest package.json

{ "name": "michelin-igd-spfx-ext", "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/decorators": "1.16.1", "@microsoft/sp-core-library": "1.16.1", "@microsoft/sp-dialog": "1.16.1", "@microsoft/sp-http": "1.16.1", "@microsoft/sp-listview-extensibility": "1.16.1", "@pnp/common": "2.0.7", "@pnp/logging": "2.0.7", "@pnp/odata": "2.0.7", "@pnp/sp": "2.0.7", "@pnp/spfx-controls-react": "3.15.0", "class-transformer": "0.5.1", "gulp": "^4.0.2", "moment": "2.29.4", "office-ui-fabric-react": "7.204.0", "react": "17.0.1", "react-dom": "17.0.1" }, "devDependencies": { "@microsoft/rush-stack-compiler-4.5": "0.2.2", "@microsoft/sp-build-web": "1.16.1", "@microsoft/sp-module-interfaces": "1.16.1", "@types/chai": "3.4.34", "@types/es6-promise": "0.0.33", "@types/mocha": "2.2.38", "@types/react": "17.0.1", "@types/react-dom": "17.0.1", "@types/webpack-env": "1.13.1", "@typescript-eslint/eslint-plugin": "5.51.0", "@typescript-eslint/parser": "5.51.0", "ajv": "8.12.0", "eslint": "8.34.0", "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", "gulp": "4.0.2", "gulp-eslint7": "0.3.2", "typescript": "4.5" } }

SharePoint / sp-dev-docs