Current package version (3.21.0) does not work with the SPFx version 1.21.1

[vishalshitole]

Category

[ ] Enhancement

[x] Bug

[ ] Question

Version

Please specify what version of the library you are using: [ 3.21.0 ]

Expected / Desired Behavior / Question

The current version of the @pnp/spfx-controls-react package 3.21.0 should work with the latest version of the SharePoint Framework SPFx 1.21.1.

Observed Behavior

While bundling and/or serving the SPFx solution created with the SPFx version 1.21.1, which has the dependency on @pnp/spfx-controls-react: 3.21.0, I receive an error. Please see the screenshot below for the error message.

Steps to Reproduce

1. Create a simple web part (React) solution with SPFx version 1.21.1.
2. Add @pnp/spfx-controls-react: 3.21.0 as a dependency in the package.json
3. Run npm install in terminal
4. Build the solution with gulp build --ship
5. Bundle the solution with gulp bundle --ship
6. Observe the terminal output

Thanks!

[github-actions]

Thank you for submitting your first issue to this project.

[HiltonGiesenow]

It's working fine for me in a couple of different projects, some new and some upgraded. Not sure how much difference it makes, but I'm running gulp clean && gulp bundle --production && gulp package-solution --production. I'm also using fast-serve with it.

[vishalshitole]

Thank you @HiltonGiesenow for your comment. However, it does not work for me. I tried the same chained command you provided above, and even tried to serve with spfx-fast-serve. I get the same error for both.

[HiltonGiesenow]

I wonder if it's a node version? I'm on 22, which I think is needed for SPFx 1.21. Here's my package.json if it helps:

{
	"name": "whatever",
	"version": "1.0.0",
	"private": true,
	"engines": {
		"node": ">=22.14.0 < 23.0.0"
	},
	"main": "lib/index.js",
	"scripts": {
		"build": "gulp bundle",
		"clean": "gulp clean",
		"test": "gulp test",
		"serve": "fast-serve"
	},
	"dependencies": {
		"@fluentui/react": "^8.122.16",
		"@microsoft/sp-component-base": "^1.21.1",
		"@microsoft/sp-core-library": "^1.21.1",
		"@microsoft/sp-lodash-subset": "^1.21.1",
		"@microsoft/sp-office-ui-fabric-core": "^1.21.1",
		"@microsoft/sp-property-pane": "^1.21.1",
		"@microsoft/sp-webpart-base": "^1.21.1",
		"@pnp/sp": "^4.12.0",
		"@pnp/spfx-controls-react": "^3.21.0",
		"react": "17.0.1",
		"react-dom": "17.0.1",
		"tslib": "^2.8.1"
	},
	"devDependencies": {
		"@microsoft/eslint-config-spfx": "^1.21.1",
		"@microsoft/eslint-plugin-spfx": "^1.21.1",
		"@microsoft/rush-stack-compiler-5.3": "0.1.0",
		"@microsoft/sp-build-web": "^1.21.1",
		"@microsoft/sp-module-interfaces": "^1.21.1",
		"@rushstack/eslint-config": "4.0.1",
		"@types/react": "17.0.45",
		"@types/react-dom": "17.0.17",
		"@types/webpack-env": "~1.15.2",
		"ajv": "^6.12.5",
		"eslint": "8.57.1",
		"eslint-plugin-react-hooks": "4.3.0",
		"gulp": "4.0.2",
		"spfx-fast-serve-helpers": "~1.21.0",
		"typescript": "~5.3.3"
	}
}

[vishalshitole]

@HiltonGiesenow Even I am on node version 22. I compared your package.json with mine, and they are almost same.

{
  "name": "test-1-21-1",
  "version": "0.0.1",
  "private": true,
  "engines": {
    "node": ">=22.14.0 < 23.0.0"
  },
  "main": "lib/index.js",
  "scripts": {
    "build": "gulp bundle",
    "clean": "gulp clean",
    "test": "gulp test",
    "serve": "fast-serve"
  },
  "dependencies": {
    "tslib": "2.3.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "@fluentui/react": "^8.106.4",
    "@microsoft/sp-core-library": "1.21.1",
    "@microsoft/sp-component-base": "1.21.1",
    "@microsoft/sp-property-pane": "1.21.1",
    "@microsoft/sp-webpart-base": "1.21.1",
    "@microsoft/sp-lodash-subset": "1.21.1",
    "@microsoft/sp-office-ui-fabric-core": "1.21.1",
    "@pnp/spfx-controls-react": "3.21.0"
  },
  "devDependencies": {
    "@microsoft/rush-stack-compiler-5.3": "0.1.0",
    "@rushstack/eslint-config": "4.0.1",
    "@microsoft/eslint-plugin-spfx": "1.21.1",
    "@microsoft/eslint-config-spfx": "1.21.1",
    "@microsoft/sp-build-web": "1.21.1",
    "@types/webpack-env": "~1.15.2",
    "ajv": "^6.12.5",
    "eslint": "8.57.1",
    "gulp": "4.0.2",
    "typescript": "~5.3.3",
    "@types/react": "17.0.45",
    "@types/react-dom": "17.0.17",
    "eslint-plugin-react-hooks": "4.3.0",
    "@microsoft/sp-module-interfaces": "1.21.1",
    "spfx-fast-serve-helpers": "~1.21.0"
  }
}

[HiltonGiesenow]

try install @microsoft/sp-http-msgraph explicitly, version 1.21.1

[vishalshitole]

@HiltonGiesenow It did work after installing "@microsoft/sp-http-msgraph": "1.21.1" explicitly as a dependency. I wonder why it is needed though? Do you have any findings or thoughts?

Also, have you come across any issues while using the current version of "@pnp/spfx-controls-react": "3.21.0" and "@pnp/spfx-property-controls": "3.20.0" (which are on SPFx version 1.20.0) with SPFx version 1.21.1?

cc: @AJIXuMuK @michaelmaillot

[HiltonGiesenow]

ok glad to hear. Not sure why it's needed, but it just looked like it was, from the original error. Other than that, no issues my side with 3.21 of the controls - so far so good my side.

[fonbrauzen]

AFAIK, 3.21 shouldn't work on SPFX 1.21.1, because master branch has dependencies on SPFX 1.20, and only dev has 1.21.1, so it will, after the 3.22 release, which I myself have been waiting for quite some time. For the same SPFX 1..21.1 & Node 22 support reason...

[tivanchuk-hawe]

I guess this could be closed - #2027

[vishalshitole]

Thank you @tivanchuk-hawe for the update. The version 3.22.0 is now on SPFx version 1.21.1. Hence, closing this one.