This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
I've completed all the coding steps in the exercise titled "Exercise - Use the SPFx PnP reusable property pane controls" and when I attempt to load the web part as indicated in my workbench it comes up with the following error:
"Something went wrong
If the problem persists, contact the site administrator and give them the information in Technical Details.
TECHNICAL DETAILS
ERROR:
[object Object]"
I have both manually entered and copy and pasted the code and the same thing happens. I've even tried 3 different browsers and none of them are loading the part like described. This isn't the first time this happened with one of these and seems to be a trend.
This question is related to the following Learning Module
This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(275.2, 2%, 36%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EK%3C/text%3E%3C/svg%3E)
Hi Heath Edwards,
We are currently doing some research on this issue; will let you know as soon as possible.
![](data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' height='64' class='font-weight-bold' style='font: 600 30.11764705882353px "SegoeUI", Arial' width='64'%3E%3Ccircle fill='hsl(22.400000000000002, 64%, 12%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EBD%3C/text%3E%3C/svg%3E)
I'm having the exact same issues. I've tried clearing cache, restarting, remaking the project from scratch etc. Web part works fine without the PnP component. I even tried multiple different PnP components (color picker and number field) that all result in the same. If I remove the associated import statements and the "PropertyField..." function calls from the groupFields array, the web part loads fine, so it's something wrong with the PnP stuff being called in.
Surprisingly it worked for me but as I just noticed, the filenames that are downloaded as part of the project ARE NOT the same as what is indicated in the steps. The steps indicate the files called ISpFxHttpClientDemoWebPartProps.ts and SpFxHttpClientDemoWebPart.ts but the files that are setup as part of the initial framework load do not include WebPart in their names. I manually updated them and had to correct the actual code to reflect this and then it seemed to work. It goes back to the correct naming in the next exercise which is utterly confusing since it has you use the same project previously.
Hi Heath Edwards,
We're glad to hear that you got the results. As stated in the Learn module, ensure that Node.js V18 is installed locally and that all necessary prerequisites are met. Make sure you replace the code in the Webpart code according to the guidelines. It will function without any additional steps. If I have provided a prompt response, you may provide your Accept Answer. So that other community members can benefit from the information. If the issue persists, please contact us, and we'll be glad to assist you further.
Hi Heath Edwards,
Thank you for reaching out to us on the Microsoft Q&A platform.
We have completed the repro procedures on our end in response to your input, and we are able to implement the PnPControls as specified in the instructions. We are asking you to try again one more time. Please confirm that you must install V18 and enable all local prerequisites as specified in the instructions. We must first create a folder, navigate to it using the Node.js command prompt, and then execute the following command from the location where your code is displayed before running the gulp trust-dev-cert command yo @microsoft/sharepoint
From there, you may change the tenantDomain and code blocks as needed in the documentation. Following gulp serve, you will see a web session in the browser window. From there, you will see your PnPControls. You're still getting the "contact the site administrator and give them the information in Technical Details" error message; please double-check your SharePoint sites and content for any restrictions. If there are, kindly allocate or obtain permission from your administrator.
If you have any additional questions, please let us know in the comments. We’re happy to assist further.
If you found the answer helpful, please click on Upvote and Accept Answer. This will help other community members.
Hi Heath Edwards,
I wanted to check if you had the chance to review the information that was provided. Please feel free to contact us if you have any more queries. If I have provided a prompt response, you may provide your Accept Answer. So that other community members can benefit from the information.
This comment has been deleted due to a violation of our Code of Conduct. The comment was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.