This browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
![](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, 52%, 36%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3EAF%3C/text%3E%3C/svg%3E)
I have now followed and completed all the steps in the exercise "Exercise - Use the SPFx PnP reusable property pane controls", but I get an error when adding the web part. The image below shows the error message and what I see in the F12 console.
Here is the link to the exercise: https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-web-part-property-pane/7-exercise-pnp-controls
I have added the web part both using the Workbench and by creating my own page and using the debug link on it. I get the same error in both cases.
I am using the same versions specified in the exercise and have even checked the source code on GitHub to ensure that it matches exactly (HelloPnPControlsWebPart.ts & package.json).
I have also performed the following steps and still get the same error:
How can I proceed to get this working?
![](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 Andersson, Frida,
Appreciate your query over the Microsoft Q&A forum. We are looking into the issue and will get back to you soon.
![](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(25.6, 28.000000000000004%, 12%)' cx='32' cy='32' r='32' /%3E%3Ctext x='50%25' y='55%25' dominant-baseline='middle' text-anchor='middle' fill='%23FFF' %3ESN%3C/text%3E%3C/svg%3E)
System adminstration
Hi Andersson, Frida,
Please refer to the URL to resolve your issue, which occurs and prevents you from module completion.
Hello Andersson, Frida,
Just wanted to check if you had the chance to review the information that was provided above.
Hello kguntaka,
I have read it, but it doesn’t work for me.
The issue the other person mentioned regarding incorrect filenames does not apply to me—I have the correct names, so that’s not the problem in my case.
Additionally, your solution doesn’t work for me either. I am an admin and have followed the guide in the exercise exactly, so the issue must be something else.
I encountered the exact same problem in the previous exercise (https://learn.microsoft.com/en-us/training/modules/sharepoint-spfx-web-part-property-pane/5-exercise-build-custom-controls), with the same error message. After investigating, I discovered that the issue was missing React packages in the package.json file.
After adding these missing packages, my package.json no longer matched the one in GitHub associated with that exercise—it required additional dependencies to work properly. Even though I installed React the way the exercise described, it didn’t include all the necessary React dependencies. As a result, my package.json file contains more React-related dependencies than the one in GitHub.
Since I received the same error message in this exercise, I decided to check if the same issue was causing the problem here. Eventually, I tried adding the missing packages, and it worked.
Now, my package.json looks like this:
{
"name": "hello-pn-p-controls",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=18.17.1 <19.0.0"
},
"main": "lib/index.js",
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"react": "17.0.1",
"react-dom": "17.0.1",
"@microsoft/sp-component-base": "1.20.0",
"@microsoft/sp-core-library": "1.20.0",
"@microsoft/sp-lodash-subset": "1.20.0",
"@microsoft/sp-office-ui-fabric-core": "1.20.0",
"@microsoft/sp-property-pane": "1.20.0",
"@microsoft/sp-webpart-base": "1.20.0",
"@pnp/spfx-property-controls": "3.19.0",
"tslib": "2.3.1"
},
"devDependencies": {
"@fluentui/react": "^8.106.4",
"@microsoft/eslint-config-spfx": "1.20.2",
"@microsoft/eslint-plugin-spfx": "1.20.2",
"@microsoft/rush-stack-compiler-4.7": "0.1.0",
"@microsoft/sp-build-web": "1.20.2",
"@microsoft/sp-module-interfaces": "1.20.2",
"@rushstack/eslint-config": "4.0.1",
"@types/webpack-env": "~1.15.2",
"@types/react": "17.0.45",
"@types/react-dom": "17.0.17",
"ajv": "^6.12.5",
"eslint": "8.57.0",
"gulp": "4.0.2",
"typescript": "4.7.4"
}
}
The dependencies I had to add in this exercise were:
"dependencies": {
"react": "17.0.1",
"react-dom": "17.0.1"
},
"devDependencies": {
"@types/react": "17.0.45",
"@types/react-dom": "17.0.17"
}
After adding these, everything worked fine.
Hi Andersson, Frida,
I'm happy that you were able to fix the issue and that it was self-resolved on your end. We will consider your suggestions and let our backend team know if any changes are required for the exercise. As part of its ongoing efforts to enhance end-user products, Microsoft encourages feedback, which will be considered throughout the exercise. We request you to finish your learning goals and keep MS Learning.
Since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others ", I'll repost your solution in case you'd like to accept the answer.
Ask: Webpart with property pane controls don't work after completing all steps in exercise
Solution: If I missed anything please let me know and I'd be happy to add it to my answer, or feel free
If you have any other questions, please let me know. Thank you again for your time and patience throughout this issue.
Please don’t forget to Accept Answer and Yes for "was this answer helpful" wherever the information provided helps you, this can be beneficial to other community members.