patrup commented 1 year ago

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

[ ] 💥 Internet Explorer
[X] 💥 Microsoft Edge
[X] 💥 Google Chrome
[X] 💥 FireFox
[ ] 💥 Safari
[ ] mobile (iOS/iPadOS)
[ ] mobile (Android)
[ ] not applicable
[ ] other (enter in the "Additional environment details" area below)

Additional environment details

browser version

MS EDGE Version 107.0.1418.35 (Official build) (64-bit) Chrome Version 107.0.5304.88 (Official Build) (64-bit)
SPFx version

1.15.0

Node.js version

v14.19.0 devcontainer.json

{
"name": "SPFx 1.15.0",
"image": "docker.io/m365pnp/spfx:1.15.0",
// Set _default_ container specific settings.json values on container create.
"settings": {},
// Add the IDs of extensions you want installed when the container is created.
"extensions": [
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint"
],
"mounts": [
"source=/mnt/c/,target=/workspaces/c,type=bind,consistency=cached",
],
// Use 'forwardPorts' to make a list of ports inside the container available locally.
"forwardPorts": [
4321,
// Not needed for SPFx>= 1.12.1
//5432,
35729
],
"portsAttributes": {
"4321": {
"protocol": "https",
"label": "Manifest",
"onAutoForward": "silent",
"requireLocalPort": true
},
// Not needed for SPFx>= 1.12.1
//  "5432": {
//      "protocol": "https",
//      "label": "Workbench",
//      "onAutoForward": "silent"
//  },
"35729": {
"protocol": "https",
"label": "LiveReload",
"onAutoForward": "silent",
"requireLocalPort": true
}
},
"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
"remoteUser": "node"
}

spfx-startup.sh


echo
echo -e "\e[1;94mInstalling Node dependencies\e[0m"
npm install

commands to create dev certificate and copy it to the root folder of the project

echo echo -e "\e[1;94mGenerating dev certificate\e[0m" gulp trust-dev-cert

Convert the generated PEM certificate to a CER certificate

openssl x509 -inform PEM -in ~/.rushstack/rushstack-serve.pem -outform DER -out ./spfx-dev-cert.cer

Copy the PEM ecrtificate for non-Windows hosts

cp ~/.rushstack/rushstack-serve.pem ./spfx-dev-cert.pem

add *.cer to .gitignore to prevent certificates from being saved in repo

if ! grep -Fxq '.cer' ./.gitignore then echo "# .CER Certificates" >> .gitignore echo ".cer" >> .gitignore fi

add *.pem to .gitignore to prevent certificates from being saved in repo

if ! grep -Fxq '.pem' ./.gitignore then echo "# .PEM Certificates" >> .gitignore echo ".pem" >> .gitignore fi

echo echo -e "\e[1;92mReady!\e[0m"

echo -e "\n\e[1;94m**\nOptional: if you plan on using gulp serve, don't forget to add the container certificate to your local machine. Please visit https://aka.ms/spfx-devcontainer for more information\n**"

launch.json

{ "version": "0.2.0", "configurations": [ { "name": "Hosted workbench", "type": "pwa-chrome", "request": "launch", "url": "https://xxx.sharepoint.com/_layouts/15/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" ] } ] }

serve.json

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

package.json

{ "name": "test-debug", "version": "0.0.1", "private": true, "main": "lib/index.js", "scripts": { "build": "gulp bundle", "clean": "gulp clean", "test": "gulp test" }, "dependencies": { "tslib": "2.3.1", "react": "16.13.1", "react-dom": "16.13.1", "office-ui-fabric-react": "7.185.7", "@microsoft/sp-core-library": "1.15.2", "@microsoft/sp-property-pane": "1.15.2", "@microsoft/sp-webpart-base": "1.15.2", "@microsoft/sp-lodash-subset": "1.15.2", "@microsoft/sp-office-ui-fabric-core": "1.15.2" }, "devDependencies": { "@microsoft/rush-stack-compiler-4.5": "0.2.2", "@rushstack/eslint-config": "2.5.1", "@microsoft/eslint-plugin-spfx": "1.15.2", "@microsoft/eslint-config-spfx": "1.15.2", "@microsoft/sp-build-web": "1.15.2", "@types/webpack-env": "~1.15.2", "ajv": "^6.12.5", "gulp": "4.0.2", "typescript": "4.5.5", "@types/react": "16.9.51", "@types/react-dom": "16.9.8", "eslint-plugin-react-hooks": "4.3.0", "@microsoft/sp-module-interfaces": "1.15.2" } }



### Describe the bug / error

gulp serve works in workbench on SharePoint online but starting the debugger "Hosted Workbench" results in Errors:
ERROR in browser console
sp-webpart-workbench-assembly_de-de_a7923586a0a0b5c1f079cce509749348.js:70 Fehler beim Laden des Debugmanifests: Error: Script error for: https://localhost:4321/temp/manifests.js
http://requirejs.org/docs/errors.html#scripterror

ERROR in vscode DEBUG CONSOLE
Could not read source map for https://login.microsoftonline.com/9ffa5805-cd82-46e7-8021-b83ff925f065/oauth2/authorize?client%5Fid=00000003%2D0000%2D0ff1%2Dce00%2D000000000000&response%5Fmode=form%5Fpost&response%5Ftype=code%20id%5Ftoken&resource=00000003%2D0000%2D0ff1%2Dce00%2D000000000000&scope=openid&nonce=5D940886D851D0AC9A2D30BB762157CFC07BCDDBAB3F327C%2DC61D0A4A974B24C8FD1D2A6A13F17EB24FF985358534A8C452538A788AE33181&redirect%5Furi=https%3A%2F%2Fadvellencesolutionsag%2Esharepoint%2Ecom%2F%5Fforms%2Fdefault%2Easpx&state=OD0w&claims=%7B%22id%5Ftoken%22%3A%7B%22xms%5Fcc%22%3A%7B%22values%22%3A%5B%22CP1%22%5D%7D%7D%7D&wsucxt=1&cobrandid=11bd8083%2D87e0%2D41b5%2Dbb78%2D0bc43c8a8e8a&client%2Drequest%2Did=846076a0%2D50ea%2D5000%2D77fd%2D7d04cc444584: Unexpected 404 response from https://login.microsoftonline.com/9ffa5805-cd82-46e7-8021-b83ff925f065/oauth2/47a4a0bc5569d72c9278.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."]}

[38;5;196mWarnung!
Wenn Sie dieses Tool verwenden, setzt Sie dies potenziellen Sicherheitsbedrohungen aus, die dazu führen können, dass andere Zugriff auf Ihre persönlichen Office 365-Daten erhalten (Dokumente, E-Mails, Unterhaltungen und mehr). Stellen Sie sicher, dass Sie der Person oder Organisation vertrauen, die Sie aufgefordert hat, auf dieses Tool zuzugreifen, bevor Sie fortfahren.

Hier erfahren Sie mehr: https://technet.microsoft.com/en-us/library/bb794823.aspx

Could not read source map for https://amcdn.msftauth.net/me?partner=Sharepoint&version=10.22274.1&market=de-DE&wrapperId=suiteshell: Unexpected 404 response from https://amcdn.msftauth.net/meInlineBackCompat.min.js.map: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>404 - File or directory not found.</title>
<style type="text/css">
<!--
body{margin:0;font-size:.7em;font-family:Verdana, Arial, Helvetica, sans-serif;background:#EEEEEE;}
fieldset{padding:0 15px 10px 15px;} 
h1{font-size:2.4em;margin:0;color:#FFF;}
h2{font-size:1.7em;margin:0;color:#CC0000;} 
h3{font-size:1.2em;margin:10px 0 0 0;color:#000000;} 
#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:"trebuchet MS", Verdana, sans-serif;color:#FFF;
background-color:#555555;}
#content{margin:0 0 0 2%;position:relative;}
.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;}
-->
</style>
</head>
<body>
<div id="header"><h1>Server Error</h1></div>
<div id="content">
 <div class="content-container"><fieldset>
  <h2>404 - File or directory not found.</h2>
  <h3>The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.</h3>
 </fieldset></div>
</div>
</body>
</html>
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=cf84089f-b18f-4b5f-83d5-c4dad8f9fb9e&response_mode=fragment&response_type=code&x-client-SKU=msal.js.browser&x-client-VER=2.28.1&client_info=1&code_challenge=EpgrNEwGxzKvr7xT9LDkP1a_Bciw3B2COZXrVUNYphI&code_challenge_method=S256&prompt=none&login_hint=XXXXXXXXX&X-AnchorMailbox=UPN%3AXXXXXXXX&nonce=e50f100f-a5af-424e-b0fa-5d08aafdebef&state=eyJpZCI6ImIzNzM0OTY2LTM1NzQtNDRiYy04OGE5LWJlMjQ3ZDQwNTY0MCIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoic2lsZW50In19: Unexpected 404 response from https://login.microsoftonline.com/organizations/oauth2/v2.0/47a4a0bc5569d72c9278.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."]}
Fehler beim Laden des Debugmanifests: Error: Script error for: https://localhost:4321/temp/manifests.js
http://requirejs.org/docs/errors.html#scripterror
crbug/1173575, non-JS module files deprecated.
Uncaught Error Error: Load timeout for modules: http://localhost:4321/temp/manifests.js
http://requirejs.org/docs/errors.html#timeout
    at B (<eval>/VM46947589:8:252)
    at D (<eval>/VM46947589:13:495)
    at eval (<eval>/VM46947589:14:162)
    --- setTimeout ---

### Steps to reproduce

1. scaffold with yo generator
2. set URL in launch.json and serve.json
3. install certs
4. start debugger

### Expected behavior

spfx webpart available in workbench

ghost commented 1 year ago

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

AJIXuMuK commented 1 year ago

@patrup - it sounds like it is trying to load some resources from your SharePoint/Microsoft 365 Tenant and can't authenticate. As the Docker image is created by the community, I would check with PnP Community, the issue is not related to SPFx itself.

@waldekmastykarz @hugoabernier - fyi.

hugoabernier commented 1 year ago

@patrup you may want to look at the following diagnostics steps: https://github.com/pnp/sp-dev-fx-webparts/wiki/Opening-a-sample-using-a-development-container#debugging-with-containers