Your web part will not appear in the toolbox. Please make sure "gulp serve" is running in a web part project. Please refresh the page once "gulp serve" is running.
-
Where are you seeing this message? On SharePoint workbench while debugging the solution or on SharePoint page after web part deployment?– Ganesh Sanap - MVPCommented Nov 23, 2021 at 15:28
-
I'm seeing this message On SharePoint workbench while debugging.– Ariyan Ashfaque MostafaCommented Nov 23, 2021 at 15:37
-
Is gulp serve running correctly? check if there are any errors in command prompt console.– Ganesh Sanap - MVPCommented Nov 23, 2021 at 15:38
-
[spfx-serve] To load your scripts, use this query string: ?debug=true&noredir=true&debugManifestsFile=localhost:4321/temp/manifests.js showing in the command prompt console.– Ariyan Ashfaque MostafaCommented Nov 23, 2021 at 16:05
1 Answer
@ariyan,
When you run gulp serve
, you get a lot of messages on the screen, which may be confusing. Especially when there's one that says something like Opening https://enter-your-SharePoint-site/_layouts/workbench.aspx using the default OS app
which -- every time -- makes me go "Oh, the web part must be ready!"... but it isn't... yet.
The trick is to wait for Finished subtask
'reload'
after x.xx ms
. Only then will the web part be ready, and you should be able to reload the workbench page and find your web part.
If that doesn't work, you may want to make sure that you installed the self-signed developer certificate by using gulp trust-dev-cert
and accepting the prompt (which may sometimes appear in a background window).
If you're using sample code (or code that you didn't build yourself) and you're still experiencing issues, you may want to make sure that the environment you're using is compatible with your SPFx solution by using the Microsoft 365 SPFx Doctor command, by running m365 spfx doctor
from the root of the project folder after you installed the CLI for Microsoft 365.
If all else fails, please provide us more information so we can help you better.
I hope this helps?
-
I have tried all of these options, and it is still not working for me. I wait until the
reload
task completes, but then refresh the page and the error is still there.gulp trust-dev-cert
completes successfullym365 spfx doctor
runs. It finds yo version 3.3.1 and recommends installing version 4; however, when I runnpm list -g --depth=0
, it shows that I have version 4 installed. Any ideas? Commented Dec 9, 2022 at 22:04 -
1Update: Now I feel dumb, but I will comment in case it helps someone. I was using brave browser with "Shields Up" -- it was blocking something that was required for this to work correctly. I turned off the "Shields Up" option, and it works well. Commented Dec 9, 2022 at 22:09