React Content Query Online - Throws error on loading web part

[maj-jacob]

Disclaimer

Yes

Sample

https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-content-query-online

Contributor(s)

@PopWarner @PaoloPia @hugoabernier

What happened?

The web part does not work after put on page. It throws an "Something went wrong" error. Details only say [object Object]

Maybe relevant: the build throws a warning:

(it's not a CDN issue as in other report suggested)

Steps to reproduce

1. Build webpart
2. Add webpart to page

Expected behavior

a working webpart, without an error

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

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

What version of Node.js is currently installed on your workstation?

v18.19.0

What version of Node.js is required by the sample?

Node.js v16 | v18

Paste the results of SPFx doctor

√ SharePoint Framework v1.18.2
√ Node v18.19.0
√ yo v5.0.0
√ gulp-cli v2.3.0
√ bundled typescript used
[
{
"check": "SharePoint Framework",
"passed": true,
"version": "1.18.2",
"message": "SharePoint Framework v1.18.2 valid."
},
{
"check": "SharePoint Framework",
"passed": true,
"version": "1.18.2",
"message": "SharePoint Framework v1.18.2"
},
{
"check": "Node",
"passed": true,
"message": "Node v18.19.0",
"version": "18.19.0"
},
{
"check": "yo",
"passed": true,
"message": "yo v5.0.0",
"version": "5.0.0"
},
{
"check": "gulp-cli",
"passed": true,
"message": "gulp-cli v2.3.0",
"version": "2.3.0"
},
{
"check": "typescript",
"passed": true,
"message": "bundled typescript used"
}
]

Additional environment details

No response

[mauricework]

We are getting the same thing here as well. I have been trying for couple of weeks to figure out what I was doing wrong since I am new to this lol.

[aliiamar]

We are getting the same thing here as well. I have been trying for couple of weeks to figure out what I was doing wrong since I am new to this lol.

@mauricework is the issue still persists in your environment? Do share any workarounds if you have :)

[mauricework]

@aliiamar nope it is still a problem.

[johndiehlwh]

Same issue here... did you find a solution yet?

[mauricework]

Same issue here... did you find a solution yet?

Sorry no I have not. I have not had a lot of time to look at it.

[raytri]

I am having this exact problem as well. Would really appreciate an answer, as we are trying to replace an older version of the webpart for security reasons.

[jleckard007]

I can't even get it to build I thought it needed Node v 10 to run but I can't get that version to run npm I am going to try another version.

[gdnhsg]

I have this problem, but put that down to MCAS breaking the expected URLs. We haven't tried building it lately, however.

[mauricework]

@gdnhsg we are not using MCAS here so that should not be it. When was the last time you built it do you know?

[jleckard007]

I would like it very much if someone could just put in the sspkg in the file I know a long time ago there was one pakage and it gave me this and several other webparts but I can't find that website anymore

[mauricework]

I believe I have found the issue (and thanks to one of my teammates - DL). Once I had some time I put a bunch of logging in and finally got it to display this error

Cannot find manifest for 32b9363b-09ff-4959-929a-cab2663fb223_3.0.2. Store had [2.2.1]. Service worker version: (none); App version: (unknown); Next app version: (unknown)

That error is referencing the Microsoft Graph Toolkit (MGT) in the project. In the package.json it is asking for this
"@microsoft/microsoft-graph-client": "3.0.2",
But the tenant only has 2.2.1 of the MGT installed. The fix I used was to do this in the project directory
npm i @microsoft/microsoft-graph-client@3.0.2 -SE

Example: C:\SPFX\sp-dev-fx-webparts\samples\react-content-query-online>npm i @microsoft/microsoft-graph-client@3.0.2 -SE

Once I did that and did a gulp clean and then did the build, bundle, and package everything worked. I am not sure this is a great solution but it is the one that worked. If anyone knows something better to do instead I can give it a try.

My thoughts are for those of us this is not working on we do not have MGT 3.0.2 installed in our tenant which is what is causing the issue.

Thanks.

[hugoabernier]

Great job finding this! I'll make a quick PR later to update this -- unless you would like to do it?