Sp-dev-docs: Error loading debug manifests.

[donavanmarais]

Category

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

Tutorial: Build your first SharePoint Framework Extension (Hello World part 1)

URL: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/get-started/build-a-hello-world-extension

Expected or Desired Behavior

"When the code compiles without errors, it serves the resulting manifest from https://localhost:4321 and also starts your default browser with needed query parameters."

Observed Behavior

After performing gulp serve command, Chrome opens, I select "Load debug scripts", which is followed by an error message, as follows:

*Error loading debug manifests.
*Error loading debug script. Ensure the server is running and the "debugManifestsFile" parameter URL is correct.

Error: Error loading https://localhost:4321/temp/manifests.js XHR error loading https://localhost:4321/temp/manifests.js

The only action is to click the "*Dismiss" button, which results in a white screen.

Terminal printout as follows:

mbp-dmarais1:app-extension dmarais$ gulp serve
Build target: DEBUG
[15:38:18] Using gulpfile ~/Projects/app-extension/gulpfile.js
[15:38:18] Starting gulp
[15:38:18] Starting 'serve'...
[15:38:18] Starting subtask 'configure-sp-build-rig'...
[15:38:18] Finished subtask 'configure-sp-build-rig' after 3.1 ms
[15:38:18] Starting subtask 'spfx-serve'...
[15:38:18] Starting server...
[15:38:18] Finished subtask 'spfx-serve' after 124 ms
[15:38:18] Starting subtask 'pre-copy'...
[15:38:18] Finished subtask 'pre-copy' after 2.58 ms
[15:38:18] Starting subtask 'copy-static-assets'...
[15:38:18] Starting subtask 'sass'...
{ Error: getaddrinfo ENOTFOUND localhost
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:57:26)
errno: 'ENOTFOUND',
code: 'ENOTFOUND',
syscall: 'getaddrinfo',
hostname: 'localhost' }
[15:38:19] Error - Unknown
getaddrinfo ENOTFOUND localhost
[15:38:19] Opening https://mysitedomain.sharepoint.com/sites/mysitename/SitePages/Home.aspx?debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js&loadSPFX=true&customActions=%7B%224f855e70-b74e-47f7-83ea-cf4bc1d2ff21%22%3A%7B%22location%22%3A%22ClientSideExtension.ApplicationCustomizer%22%2C%22properties%22%3A%7B%22testMessage%22%3A%22Test%20message%22%7D%7D%7D using the default OS app
[15:38:19] Finished subtask 'sass' after 421 ms
[15:38:19] Starting subtask 'tslint'...
[15:38:19] [tslint] tslint version: 5.9.1
[15:38:19] Starting subtask 'tsc'...
[15:38:19] [tsc] typescript version: 2.4.2
[15:38:19] Finished subtask 'copy-static-assets' after 455 ms
[15:38:19] ==================[ Finished ]==================
Error - Unknown
getaddrinfo ENOTFOUND localhost
[15:38:19] Finished subtask 'tsc' after 761 ms
[15:38:19] Starting subtask 'ts-npm-lint'...
[15:38:19] Finished subtask 'ts-npm-lint' after 15 ms
[15:38:19] Starting subtask 'api-extractor'...
[15:38:19] Finished subtask 'api-extractor' after 364 μs
[15:38:20] Project app-extension version:0.0.1
[15:38:20] Build tools version:3.8.8
[15:38:20] Node version:v10.9.0
[15:38:20] Total duration:2.79 s
[15:38:20] Task errors:2
[15:38:20] Error - 'undefined' errored after
"orchestration aborted"
[15:38:20] Finished subtask 'tslint' after 1.04 s
[15:38:20] Starting subtask 'post-copy'...
[15:38:20] Finished subtask 'post-copy' after 116 μs
[15:38:20] Starting subtask 'collectLocalizedResources'...
[15:38:20] Finished subtask 'collectLocalizedResources' after 2.46 ms
[15:38:20] Starting subtask 'configure-webpack'...
[15:38:20] Finished subtask 'configure-webpack' after 496 ms
[15:38:20] Starting subtask 'webpack'...
[15:38:20] Finished subtask 'webpack' after 126 ms
[15:38:20] Starting subtask 'configure-webpack-external-bundling'...
[15:38:20] Finished subtask 'configure-webpack-external-bundling' after 441 μs
[15:38:20] Starting subtask 'copy-assets'...
[15:38:20] Finished subtask 'copy-assets' after 8.96 ms
[15:38:20] Starting subtask 'write-manifests'...
[15:38:21] Finished subtask 'write-manifests' after 587 ms
[15:38:21] Starting subtask 'reload'...
[15:38:21] Finished subtask 'reload' after 692 μs

[aarohbits]

Tried with Node 6.4 and Node 8.11.4 (as per documenation, https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment )

getting this same error as reported by donavanmarais.

λ gulp serve --config default
Build target: DEBUG
[13:38:09] Using gulpfile ~\Documents\aaroh\SPFx Samples\AppCustomizer\gulpfile.js
[13:38:09] Starting gulp
[13:38:09] Starting 'serve'...
[13:38:09] Starting subtask 'configure-sp-build-rig'...
[13:38:09] Finished subtask 'configure-sp-build-rig' after 7.23 ms
[13:38:09] Starting subtask 'spfx-serve'...
[13:38:09] Warning - [spfx-serve] When serving in HTTPS mode, a PFX cert path or a cert path and a key path must be provided, or a dev certificate must be generated and trusted. If a SSL certificate isn't provided, a default, self-signed certificate will be used. Expect browser security warnings.
[13:38:09] Starting server...
[13:38:09] Finished subtask 'spfx-serve' after 263 ms
[13:38:09] Starting subtask 'pre-copy'...
[13:38:09] Finished subtask 'pre-copy' after 11 ms
[13:38:09] Starting subtask 'copy-static-assets'...
[13:38:09] Starting subtask 'sass'...
[13:38:10] Server started https://localhost:4321
[13:38:10] LiveReload started on port 35729
[13:38:10] Running server
[13:38:10] Opening https://ABC.sharepoint.com/sites/DemoChatbot?debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js&loadSPFX=true&customActions=%7B%2232f82cff-53a2-4afd-a0e7-342d974cb719%22%3A%7B%22location%22%3A%22ClientSideExtension.ApplicationCustomizer%22%2C%22properties%22%3A%7B%22testMessage%22%3A%22Test%20message%22%7D%7D%7D using the default OS app
[13:38:10] Finished subtask 'sass' after 832 ms
[13:38:10] Starting subtask 'tslint'...
[13:38:10] [tslint] tslint version: 5.9.1
[13:38:10] Starting subtask 'tsc'...
[13:38:10] [tsc] typescript version: 2.4.2
[13:38:10] Finished subtask 'copy-static-assets' after 1.04 s
[13:38:12] Finished subtask 'tsc' after 2.13 s
[13:38:12] Starting subtask 'ts-npm-lint'...
[13:38:12] Finished subtask 'ts-npm-lint' after 23 ms
[13:38:12] Starting subtask 'api-extractor'...
[13:38:12] Finished subtask 'api-extractor' after 1.41 ms
[13:38:13] Finished subtask 'tslint' after 3.07 s
[13:38:13] Starting subtask 'post-copy'...
[13:38:13] Finished subtask 'post-copy' after 778 μs
[13:38:13] Starting subtask 'collectLocalizedResources'...
[13:38:13] Finished subtask 'collectLocalizedResources' after 6.18 ms
[13:38:13] Starting subtask 'configure-webpack'...
[13:38:14] Finished subtask 'configure-webpack' after 1.12 s
[13:38:14] Starting subtask 'webpack'...
[13:38:14] Finished subtask 'webpack' after 171 ms
[13:38:14] Starting subtask 'configure-webpack-external-bundling'...
[13:38:14] Finished subtask 'configure-webpack-external-bundling' after 1.06 ms
[13:38:14] Starting subtask 'copy-assets'...
[13:38:14] Finished subtask 'copy-assets' after 12 ms
[13:38:14] Starting subtask 'write-manifests'...
[13:38:15] Finished subtask 'write-manifests' after 1.14 s
[13:38:15] Starting subtask 'reload'...
[13:38:15] Finished subtask 'reload' after 1.62 ms

[yuanzheng]

@aarohbits Did you run the gulp trust-dev-cert command in your project directory console to install the developer certificate? I didn't see the Warning in my terminal.

[yuanzheng]

@donavanmarais The errors maybe are caused by Node configuration. When you run gulp server, a local server should be launched at: localhost:4321. However, your system cannot find the address. Please try to update your Node version. I found someone reports the issue of getaddrinfo ENOTFOUND localhost . Please reference:

• Cannot find localhost
• Node.js Error

Both references require you to check /etc/hosts file and add 127.0.0.1 localhost

[msft-github-bot]

This issue is being closed as part of an issue list cleanup project. Issues with no activity in the past 6 months that aren't tracked by engineering as bugs were closed as part of this inititive. If this is still an issue, please follow the steps outlined to re-open the issue.