0

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

enter image description here

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, as follow:-

enter image description here

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:-

enter image description here

1 Answer 1

0

I am not sure if this could solve your problem or not but I am sharing my experience when I faced similar kind of situation.

Problem : Spfx webpart is not appearing https://siteURL/_layouts/workbench.aspx

Solution : Open the URL on same browser tab that opens by default using gulp serve

So I always use gulp serve to open the workbench ( localhost)and in the same browser tab , open the https://siteURL/_layouts/workbench.aspx

5
  • i am not using the gulp serve .. i am debugging the project directly using visual studio'
    – john Gu
    Jun 6 at 0:52
  • Sorry couldn't help you.Looking forward to answers without gulp serve.
    – Saira
    Jun 6 at 1:18
  • do you mean i need to use gulp serve ?
    – john Gu
    Jun 6 at 2:26
  • also when i tired Gulp serve i got this error: - No gulpfile found
    – john Gu
    Jun 6 at 2:31
  • First you need to sort out this error of No gulp file , once all good then try debugging project in VS
    – Saira
    Jun 6 at 2:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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