Sp-dev-docs: Debugging Spfx using VS Code debugger

[SirusT]

Category

• [ ] Question
• [ ] Typo
• [x] Bug
• [ ] Additional article idea

Expected or Desired Behavior

When I run gulp serv --nobrowser as descibed here: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/debug-in-vscode
I want to be able to run vscode debugger to step through my code.

Observed Behavior

When I run gulp serve --nobrowser the temp/workbench-packages/ folder is empty.

And when I run it in google I get the following error:
Uncaught TypeError: Cannot read property 'start' of undefined
if I look in the workbench.html page, there are references to scripts in the temp/workbench-packages
folder.

Steps to Reproduce

• In VS Code create a new project by running "yo @microsoft/sharepoint"
• Create a normal webpart, only Sharepoint Online
• Run the command "gulp serve --nobrowser"
• Press f5 to run the VS Code debugger

[croncar77]

I have exactly the same issue.
I run exactly the same steps.

These are the versions I've installed

{
"name": "xxx",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@microsoft/generator-sharepoint": "^1.5.1",
"@microsoft/sp-core-library": "1.5.1",
"@microsoft/sp-lodash-subset": "1.5.1",
"@microsoft/sp-office-ui-fabric-core": "1.5.1",
"@microsoft/sp-webpart-base": "1.5.1",
"@types/es6-promise": "0.0.33",
"@types/jquery": "^2.0.49",
"@types/jqueryui": "^1.12.2",
"@types/webpack-env": "1.13.1",
"jquery": "^2.2.4",
"jqueryui": "^1.11.1"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.5.1",
"@microsoft/sp-module-interfaces": "1.5.1",
"@microsoft/sp-webpart-workbench": "1.5.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2",
"gulp": "^3.9.1"
}
}

[olisin]

I have the exact same issue with the same steps in version 1.5.1-plusbeta:
{
"name": "helloreact-wp",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.5.1-plusbeta",
"@microsoft/sp-lodash-subset": "1.5.1-plusbeta",
"@microsoft/sp-office-ui-fabric-core": "1.5.1-plusbeta",
"@microsoft/sp-webpart-base": "1.5.1-plusbeta",
"@types/es6-promise": "0.0.33",
"@types/react": "15.6.6",
"@types/react-dom": "15.5.6",
"@types/webpack-env": "1.13.1",
"adal-angular": "^1.0.17",
"react": "15.6.2",
"react-adal": "^0.4.18",
"react-dom": "15.6.2"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.5.1-plusbeta",
"@microsoft/sp-module-interfaces": "1.5.1-plusbeta",
"@microsoft/sp-webpart-workbench": "1.5.1-plusbeta",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
}
}

[carletto75]

Same issue here :(

[tkerkman]

I am having a similar issue.
I can run gulp serve without any issue.
However, when run gulp serve --nobrowser and try to debug, chrome opens, but doesn't display anything and I get the following error in the VSC

I did find this, but the recommend options still did not stop bebugging at breakpoints.
https://github.com/SharePoint/sp-dev-docs/issues/2062

TypeError: Cannot read property 'start' of undefined
workbench.html:69
at c:\Users\xyz\dev\firstSpfx\temp\workbench.html:69:30

{
"name": "first-spfx",
"version": "0.0.1",
"private": true,
"engines": {
"node": ">=0.10.0"
},
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"@microsoft/sp-core-library": "1.5.1",
"@microsoft/sp-webpart-base": "1.5.1",
"@microsoft/sp-lodash-subset": "1.5.1",
"@microsoft/sp-office-ui-fabric-core": "1.5.1",
"@types/webpack-env": "1.13.1",
"@types/es6-promise": "0.0.33"
},
"devDependencies": {
"@microsoft/sp-build-web": "1.5.1",
"@microsoft/sp-module-interfaces": "1.5.1",
"@microsoft/sp-webpart-workbench": "1.5.1",
"gulp": "~3.9.1",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2"
}
}

[chrisforbesblogs]

Same issue here. :( Is there a fix coming?

[lennertcc]

I fixed my debugging problem in Chrome on the Hosted workbench by adding the following to sourceMapPathOverrides:

"webpack:///.././src/*": "${webRoot}/src/*",

[dezrrehm]

Make sure you're running on a local drive: this error can happen if you're (accidentally or on purpose) using a network path (for instance if your home folder is mapped to a network share by domain policy)
I think possibly it could happen if your file system is not NTFS since it uses Junctions

[lpjanaka]

Experiencing the same issue here.

[andrewconnell]

Everything should be working in the latest version of SPFx, v1.7.1.

[msft-github-bot]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues