Debug our SPFx web part inside VS Code inside a site collection workbench will not show the related web part

Question

Debug our SPFx web part inside VS Code inside a site collection workbench will not show the related web part

john john 1,021

We are developing an SPFx web part, and using VS code & Chrome debugger extension >> I debug the code:-

and we specify to debug inside a hosted Workbench:-

{  
    "version": "0.2.0",  
    "configurations": [  
  
      {  
        "name": "Hosted workbench",  
        "type": "pwa-chrome",  
        "request": "launch",  
        "url": "https://****.sharepoint.com/teams/*****/_layouts/workbench.aspx",  
        "webRoot": "${workspaceRoot}",  
        "sourceMaps": true,  
        "sourceMapPathOverrides": {  
          "webpack:///.././src/*": "${webRoot}/src/*",  
          "webpack:///../../../src/*": "${webRoot}/src/*",  
          "webpack:///../../../../src/*": "${webRoot}/src/*",  
          "webpack:///../../../../../src/*": "${webRoot}/src/*"  
        },  
        "runtimeArgs": [  
          "--remote-debugging-port=9222",  
          "-incognito"  
        ]  
      }  
    ]  
  }

but when we start debugging >> and we edit the https://****.sharepoint.com/teams/*****/_layouts/workbench.aspx page >> the SPFX web part we are developing will not appear inside the web parts list:-

now inside VS code , i found the following errors/exceptions inside the debug console:-

Uncaught Error Error: Failed to create application customizer 'ClientSideExtension.ApplicationCustomizer.1b3557f3-315d-4187-8d58-60e88e93d654'. Error information is 'Extension failed to initialize for componentId "1b3557f3-315d-4187-8d58-60e88e93d654".'.  
    at <anonymous> (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:653421)  
    --- Promise.then ---  
    at e.loadExtensions (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:651721)  
    at e._loadApplicationCustomizers (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:661449)  
    at <anonymous> (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:661027)  
    --- Promise.then ---  
    at e.navigate (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:660940)  
    at e.navigateToApplication (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:668615)  
    at c (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:78396)  
    at <anonymous> (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:78215)  
    at s (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:77814)  
    at e._startApplication (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:57468)  
    at e._startApplication (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:18238)  
    at <anonymous> (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:72370)  
    --- Promise.then ---  
    at e.start (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:71932)  
    at loaderStart (https://sharing365.sharepoint.com/teams/ViewDocsTestSite/_layouts/15/workbench.aspx:57:74)  
    at startSpfx (https://sharing365.sharepoint.com/teams/ViewDocsTestSite/_layouts/15/workbench.aspx:69:29)  
    at <anonymous> (https://sharing365.sharepoint.com/teams/ViewDocsTestSite/_layouts/15/workbench.aspx:96:21)  
    at <anonymous> (https://sharing365.sharepoint.com/teams/ViewDocsTestSite/_layouts/15/workbench.aspx:100:15)  
  
  
Uncaught Error Error: Script error for: http://localhost:4321/temp/manifests.js  
http://requirejs.org/docs/errors.html#scripterror  
    at B (<eval>/VM46947589:8:252)  
    at onScriptError (<eval>/VM46947589:30:244)  
    --- error ---  
    at e.load (<eval>/VM46947589:34:344)  
    at load (<eval>/VM46947589:29:498)  
    at load (<eval>/VM46947589:18:85)  
    at fetch (<eval>/VM46947589:18:24)  
    at check (<eval>/VM46947589:20:36)  
    at enable (<eval>/VM46947589:23:439)  
    at enable (<eval>/VM46947589:28:172)  
    at eval (<eval>/VM46947589:23:311)  
    at eval (<eval>/VM46947589:8:102)  
    at v (<eval>/VM46947589:7:173)  
    at enable (<eval>/VM46947589:22:343)  
    at init (<eval>/VM46947589:17:108)  
    at eval (<eval>/VM46947589:27:38)  
    --- setTimeout ---  
    at e.nextTick (<eval>/VM46947589:32:308)  
    at g (<eval>/VM46947589:26:490)  
    at requirejs (<eval>/VM46947589:32:203)  
    at <anonymous> (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:67093)  
    at e._require (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:67065)  
    at <anonymous> (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:63744)  
    at e.load (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:63669)  
    at e.loadScript (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:63576)  
    at e.loadScript (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:57175)  
    at e.loadAndRegisterManifestsFile (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:12303)  
    at e._loadDebugManifestsForWorkbench (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:57367)  
    at e._loadDebugManifestsForWorkbench (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:19161)  
    at <anonymous> (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:1588064)  
    --- Promise.catch ---  
    at n (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:1588024)  
    at t.onLoad (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:1588126)  
    at t._load (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:676559)  
    at e._initializeApplication (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:674274)  
    at e._initializeApplicationWithTelemetry (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:672798)  
    at e.startApplication (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:672205)  
    at e.navigate (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:660920)  
    at e.navigateToApplication (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:668615)  
    at c (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:78396)  
    at <anonymous> (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:78215)  
    at s (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:77814)  
    at e._startApplication (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:57468)  
    at e._startApplication (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:18238)  
    at <anonymous> (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:72370)  
    --- Promise.then ---  
    at e.start (https://res-1.cdn.office.net/files/sp-client/sp-webpart-workbench-assembly_en-us_5733dc04dc3fe6c1857afd79874c8501.js:72:71932)  
    at loaderStart (https://sharing365.sharepoint.com/teams/ViewDocsTestSite/_layouts/15/workbench.aspx:57:74)  
    at startSpfx (https://sharing365.sharepoint.com/teams/ViewDocsTestSite/_layouts/15/workbench.aspx:69:29)  
    at <anonymous> (https://sharing365.sharepoint.com/teams/ViewDocsTestSite/_layouts/15/workbench.aspx:96:21)  
    at <anonymous> (https://sharing365.sharepoint.com/teams/ViewDocsTestSite/_layouts/15/workbench.aspx:100:15)  
Could not read source map for https://login.microsoftonline.com/organizations/oauth2/v2.0/authorize?client_id=89bee1f7-5e6e-4d8a-9f3d-ecd601259da7&scope=https%3A%2F%2Fwebshell.suite.office.com%2F.default%20openid%20profile%20offline_access&redirect_uri=https%3A%2F%2Fwebshell.suite.office.com%2Fiframe%2FTokenFactoryIframe&client-request-id=d4384575-e83d-40b7-aed0-5b5309443ded&response_mode=fragment&response_type=code&x-client-SKU=msal.js.browser&x-client-VER=2.17.0&x-client-OS=&x-client-CPU=&client_info=1&code_challenge=5_EnnfzFx4E6BojcrF-sekI8EWIDJFzxaPjkDeqGoEg&code_challenge_method=S256&prompt=none&login_hint=development%40sharing365.io&X-AnchorMailbox=UPN%3Adevelopment%40sharing365.io&nonce=1b145f6f-bc3e-4a0f-8584-50132ac07324&state=eyJpZCI6IjQwM2UzOWI4LWMxOGMtNGFkYS1iMjQyLWM5NGI5OTk4ODdjMiIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoic2lsZW50In19: Unexpected 404 response from https://login.microsoftonline.com/organizations/oauth2/v2.0/0c8a0f745d41df706649.map:   
BSSO Telemetry: {"result":"Error","error":"NoExtension","type":"ChromeSsoTelemetry","data":{},"traces":["BrowserSSO Initialized","Creating ChromeBrowserCore provider","Sending message for method CreateProviderAsync","Received message for method CreateProviderAsync","Error: ChromeBrowserCore error NoExtension: Extension is not installed."]}  
login.microsoftonline.com/organizations/oauth2/v2.0/authorize?client_id=89bee1f7-5e6e-4d8a-9f3d-ecd601259da7&scope=https%3A%2F%2Fwebshell.suite.office.com%2F.default+openid+profile+offline_access&redirect_uri=https%3A%2F%2Fwebshell.suite.office.com%2Fiframe%2FTokenFactoryIframe&client-request-id=d4384575-e83d-40b7-aed0-5b5309443ded&response_mode=fragment&response_type=code&x-client-SKU=msal.js.browser&x-client-VER=2.17.0&x-client-OS=&x-client-CPU=&client_info=1&code_challenge=5_EnnfzFx4E6BojcrF-sekI8EWIDJFzxaPjkDeqGoEg&code_challenge_method=S256&prompt=none&login_hint=development%40sharing365.io&X-AnchorMailbox=UPN%3Adevelopment%40sharing365.io&nonce=1b145f6f-bc3e-4a0f-8584-50132ac07324&state=eyJpZCI6IjQwM2UzOWI4LWMxOGMtNGFkYS1iMjQyLWM5NGI5OTk4ODdjMiIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoic2lsZW50In19꞉56:32:74  
Some icons were re-registered. Applications should only call registerIcons for any given icon once. Redefining what an icon is may have unintended consequences. Duplicates include:   
GraphSymbol, GraphSymbol, GraphSymbol, GraphSymbol, GraphSymbol, GraphSymbol, GraphSymbol, GraphSymbol, GraphSymbol, GraphSymbol (+ 167 more)

Also when we access the workbench >> we will get this message, although we are already running/debugging the project inside VS code:-

any advice on what is going on?
Thanks

1 answer

Your answer

Answer 1

Tong Zhang_MSFT 9,251

Hi @john john ,

Please try to loading https://localhost:4321/temp/manifests.js in browser.

If it not solved ,please try to delete the .gcb-serve-data directory and running gulp trust-dev-cert again.

An example path to find the .gcb-serve-data folder is C:/Users/{username}/.gcb-serve-data

Similar issues:
https://sharepoint.stackexchange.com/questions/206389/cannot-test-spfx-webparts-on-my-sharepoint-tenancy
https://social.technet.microsoft.com/Forums/en-US/f72e7a77-bddb-4b45-a1ca-2f5c19376f02/spfx-webpart-make-sure-quotgulp-servequot-is-running-in-a-web-part-project?forum=onlineservicessharepoint

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

john john 1,021 Reputation points

2022-06-06T12:09:24.703+00:00

@Tong Zhang_MSFT i am not running this from localhost i am running this using hosted workbench
Tong Zhang_MSFT 9,251 Reputation points

2022-06-08T08:26:11.233+00:00

Hi @john john ,

Have you tried to re-run gulp trust-dev-cert ,then run gulp serve again?
Tong Zhang_MSFT 9,251 Reputation points

2022-06-13T09:00:41.4+00:00

Hi @john john ,

I am checking to see if the problem has been resolved. If you have any questions or progress, you can contact me in time.

Share via

Debug our SPFx web part inside VS Code inside a site collection workbench will not show the related web part

1 answer

Your answer