Workbench is showing empty without any error

Question

I am having the issues with my workbench and its showing me the blank page with no errors on it.

Here is the console execution

gulp serve
Build target: DEBUG
[11:08:42] Using gulpfile C:\users\xxxxxx
versions
\gulpfile.js
[11:08:42] Starting gulp
[11:08:42] Starting 'serve'...
[11:08:42] Starting subtask 'configure-sp-build-rig'...
[11:08:42] Finished subtask 'configure-sp-build-rig' after 9.51 ms
[11:08:42] Starting subtask 'spfx-serve'...
[11:08:43] Starting server...
Starting api server on port 5432.
Registring api: /getwebparts
Registring api: /.
Registring api: /workbench
[11:08:43] Finished subtask 'spfx-serve' after 787 ms
[11:08:43] Starting subtask 'pre-copy'...
[11:08:43] Finished subtask 'pre-copy' after 20 ms
[11:08:43] Starting subtask 'copy-static-assets'...
[11:08:43] Starting subtask 'sass'...
[11:08:44] Server started https://localhost:4321
[11:08:44] LiveReload started on port 35729
[11:08:44] Running server
[11:08:44] Opening https://localhost:5432/workbench using the default OS app
[11:08:44] Finished subtask 'sass' after 1.46 s
[11:08:44] Starting subtask 'tslint'...
[11:08:46] Starting subtask 'typescript'...
[11:08:46] [typescript] TypeScript version: 2.4.2
[11:08:46] Finished subtask 'copy-static-assets' after 2.53 s
Warning: no-duplicate-case rule is deprecated. Replace your usage with the TSLint no-duplicate-switch-case rule.
Warning: valid-typeof rule is deprecated. Replace your usage with the TSLint typeof-compare rule.
Request: [::1] '/workbench'
[11:08:46] Finished subtask 'tslint' after 1.47 s
Request: '/temp/workbench.html'
[11:08:47] Finished subtask 'typescript' after 1.51 s
[11:08:47] Starting subtask 'ts-npm-lint'...
[11:08:47] Finished subtask 'ts-npm-lint' after 12 ms
[11:08:47] Starting subtask 'api-extractor'...
[11:08:47] Finished subtask 'api-extractor' after 3.38 ms
[11:08:47] Starting subtask 'post-copy'...
[11:08:47] Finished subtask 'post-copy' after 603 μs
[11:08:47] Starting subtask 'collectLocalizedResources'...
Request: '/temp/manifests.js'
[11:08:47] Finished subtask 'collectLocalizedResources' after 8.56 ms
[11:08:47] Starting subtask 'configure-webpack'...
[11:08:48] Finished subtask 'configure-webpack' after 1.09 s
[11:08:48] Starting subtask 'webpack'...
Request: '/node_modules/@microsoft/sp-webpart-workbench/lib/api/workbenchInit.js'
Request: '/node_modules/@microsoft/sp-loader/dist/sp-loader_en-us.js'
[11:08:49] Finished subtask 'webpack' after 1.07 s
[11:08:49] Starting subtask 'configure-webpack-external-bundling'...
[11:08:49] Finished subtask 'configure-webpack-external-bundling' after 1.59 ms
[11:08:49] Starting subtask 'copy-assets'...
[11:08:49] Finished subtask 'copy-assets' after 13 ms
[11:08:49] Starting subtask 'write-manifests'...
[11:08:50] Finished subtask 'write-manifests' after 1.21 s
[11:08:50] Starting subtask 'reload'...
[11:08:50] Finished subtask 'reload' after 4.53 ms
Request: '/temp/workbench.html'
Request: '/temp/manifests.js'
Request: '/node_modules/@microsoft/sp-loader/dist/sp-loader_en-us.js'
Request: '/nod

Answer 1

You need to downgrade your Node.js to LTS version 8.11.3

Currently SPFx doesnt support 9.x or above versions.

Also, the npm version should be 5.x which is what you get when you install the LTS version.

Reference - Setup SPFx dev environment

Download link - Node.js

Answer 2

I've been working with this same problem for 3 days now on Windows 10, page loads, no errors, but the workbench is completely empty. Nothing to do with the version of node.js or Postgress.

My issue was being caused because my project was on a shared network drive. Re-creating a new package using yo again on the C drive allowed gulp serve to work as expected.

Node @10.24.0
Npm  @6.14.11

Answer 3

Check the following lines

[11:08:44] Server started https://localhost:4321
[11:08:44] Opening https://localhost:5432/workbench using the default OS app

The port on the address that being loaded in your browser is different to the port that the http server is running on. Try opening https://localhost:4321 inside your browser after running gulp serve to see if you can access the workbench. You can then check the setup inside serve.json