Error - Upgrading to SPFx 1.19.0

[akshataggrwal]

Issue Description
We are trying to upgrade our SPFx solutions to the latest SPFx version 1.19.0. However, while upgrading, we are facing issues with some of our existing project dependencies - @pnp/spfx-controls-react (3.x.x) and/or @pnp/spfx-property-controls (3.x.x). The issue is when we do gulp bundle or gulp serve, it fails with the error as shown in the below screenshot.

What we have tried so far
We found that there is an ongoing issue in the sp-dev-docs - SharePoint/sp-dev-docs#9675

We tried solutions/workarounds suggested in that issue thread, and one of those worked for us. Which is using beta versions of above mentioned packages. However, we are not keen on using beta packages in our solutions

"@pnp/spfx-controls-react": "4.0.0-beta.6059083",
"@pnp/spfx-property-controls": "4.0.0-beta.6059131"

Additional Environment Details
• Node version: 18.20.3
• SPFx version: 1.19.0

cc - @AJIXuMuK

[github-actions]

Thank you for submitting your first issue to this project.

[AJIXuMuK]

Will take a look. Thanks for reporting!

[AJIXuMuK]

@akshataggrwal - I'm not seeing any such issues with React controls library v 3.18.1.
what component are you exporting?

[JRRSG]

@akshataggrwal - I'm not seeing any such issues with React controls library v 3.18.1. what component are you exporting?

I am also getting this error. I started a clean form customizer solution, installed @pnp/spfx-controls-react v3.18.1 and immediately encountered this error. Removing @pnp/spfx-controls-react gets rid of the error.

[akshataggrwal]

@AJIXuMuK the issue is happening when I am using pnpm, with npm and with latest versions of the below packages it works fine.
"@pnp/spfx-controls-react": "3.18.1",
"@pnp/spfx-property-controls": "3.17.1"

Any thoughts on why pnpm may be causing the issue ?

[JRRSG]

@AJIXuMuK the issue is happening when I am using pnpm, with npm and with latest versions of the below packages it works fine. "@pnp/spfx-controls-react": "3.18.1", "@pnp/spfx-property-controls": "3.17.1"

Any thoughts on why pnpm may be causing the issue ?

Thanks, using pnpm was causing it. I had tried compiling just this package by itself, and still got errors. I isolated the problem to coming from the Adaptive Card control and deleting those related folders got rid of all the errors but 1. The last error came back saying this:

{ "message": "External \"@microsoft/microsoft-graph-client\" has an unresolved version.", "stack": "Error: External \"@microsoft/microsoft-graph-client\" has an unresolved version at [[ManifestPlugin._getExternalsScriptResourcesAsync]] (C://Users//---//source//repos//sp-dev-fx-controls-react//node_modules//.pnpm//@[email protected]_@[email protected]_@[email protected]_webpack-cli@4_75suntshj4gmifjtbemncqmx5y//node_modules//@microsoft//spfx-heft-plugins//lib//spfxManifests//webpack//ManifestPlugin.js:215:31) at async [[ManifestPlugin._generateLoaderConfigurationAsync]] (C://Users//---//source//repos//sp-dev-fx-controls-react//node_modules//.pnpm//@[email protected]_@[email protected]_@[email protected]_webpack-cli@4_75suntshj4gmifjtbemncqmx5y//node_modules//@microsoft//spfx-heft-plugins//lib//spfxManifests//webpack//ManifestPlugin.js:172:33) at async C://Users//---//source//repos//sp-dev-fx-controls-react//node_modules//.pnpm//@[email protected]_@[email protected]_@[email protected]_webpack-cli@4_75suntshj4gmifjtbemncqmx5y//node_modules//@microsoft//spfx-heft-plugins//lib//spfxManifests//webpack//ManifestPlugin.js:105:57" }

I took your advice and switched to npm and it compiled. I don't know enough to be able to dig any further than this, but hopefully this can help the devs isolate what might be going on and if it's actually pnpm's fault or if something isn't being referenced correctly and npm is able to just ignore it and pnpm can't.

[timdhahn]

@AJIXuMuK - Are there plans to update spfx to 1.19?

I have been using pnpm in my spfx projects for the past few years without any issues. I get the same error as @JRRSG. However I was able to resolve it by using "peerDependencies" in package.json.

It looks like the issue stems from sp-dev-fx-controls-react being on 1.18.2. For some reason pnpm is having issues and I'm thinking that is because of the webpack 5 changes in 'gulp bundle' (as this wasn't causing issues before).

Here is what I went through to fix the issue

Trying to bundle our project throws an error: [object object].
When you make a change to see the error (SharePoint/sp-dev-docs#9675 (comment)). The same error that @JRRSG mentioned

Now, looking back to when you do a pnpm install it gives you a list of unmet peer dependencies which is a clue to solving the issue.

The culprit
If we search for that package:
pnpm ls "*sp-http-msgraph" -r --depth Infinity

We find 1.18.2 is being referenced by @pnp/spfx-property-controls & @pnp/spfx-controls-react

Solution
Adding "peerDependencies" and the needed version of @microsoft/sp-http-msgraph solves this issue.

Hopefully this helps people having this issue, but keeping the versions synchronized might alleviate extra work and trouble shooting needed.

[AJIXuMuK]

Support for SPFx 1.19.0 has been added in the latest beta - check it out.

[timdhahn]

Thanks @AJIXuMuK. I'm able to build successfully now with pnpm