0

I'm trying to work on a project of a SPFx web part. The project was built normally but when I try to test my web part on my tenant the following error occurs:

"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.

Checked version of npm and it is the 14.15 version. I'm using SPFx version 1.14.0.

I've already ran gulp trust-dev-cert and tried to delete .gbc-serve-data but this one doesn't seem to exist on my user folder.

This is what I have in my serve.json:

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "initialPage": "https://xd51k.sharepoint.com/_layouts/workbench.aspx"
}

If you have a solution please share with me, I'm new to the SPFx development.

Update:

I found a folder with npm-cache that was outdated, I deleted it and it seems to be working now. Thanks for the help.

Improve this question
3
  • Which version of SPFx are you using?
    – Callum Crowley
    Commented Mar 31, 2022 at 15:28
  • I´m using version 1.14.0
    – João Nicola
    Commented Mar 31, 2022 at 15:34
  • 1
    @JoãoNicola you can answer your own question by adding some explanation related to the steps you followed to solve this issue.
    – Ganesh Sanap - MVP
    Commented Mar 31, 2022 at 15:56

2 Answers 2

Reset to default
1

Not sure if it helps or its too late. I had the same problem, it worked great on my windows computer but not on my ubuntu machine.

Then I tried to open the https://localhost:4321 , after opening the folder list, then tried the workbench again, astonishingly it worked after that.

Improve this answer
1
  • 1
    Thank you, that fixed it for me too.
    – Noxxys
    Commented May 24 at 11:50
0

Take a look at these two units (chapters) in the Develop web parts with the SharePoint Framework Microsoft Learn module. They should answer your questions about running a web part in the SharePoint Online workbench.

Test web parts in the hosted workbench

Exercise - Testing with the hosted SharePoint Workbench

A few notes that may not be clear in the resources above.

If you see a warning dialog in the hosted workbench, switch back to the command prompt, wait for the reload subtask to finish executing, and then refresh the hosted workbench.

enter image description here

enter image description here

Depending on the version of the SharePoint Framework you are running, the user interface for the web part may look different. There were major changes to the user interface generated by the SharePoint Framework Yoeman Generator between v1.13.1 and v1.14.0

v1.13.1 and earlier enter image description here

v1.14.0 enter image description here

Improve this answer
2
  • Thank you for the fast response . That´s exactly what I tried after running gulp serve I waited for the reload subtask to run and refreshed the page but still can´t see my webpart . I already read those links you sent me , did all those steps over and over again but still no success. Btw I´m testing on mozilla firefox
    – João Nicola
    Commented Mar 31, 2022 at 14:57
  • I just realized the issue may be related to Gulp. Prior to the release of SharePoint Framework v1.13.1, Microsoft's guidance was to install Gulp globally. That guidance has changed to installing Gulp CLI globally. Doing so enables you to have some projects that use Gulp v3 and other projects that use Gulp v4. Check to see if Gulp is installed globally by running npm list --depth 1 --global gulp. If you get a result then uninstall Gulp by running npm uninstall --global gulp and install Gulp CLI by running npm install --global gulp-cli
    – Rob Windsor
    Commented Mar 31, 2022 at 15:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.