Fix for “Can’t connect securely to this page” – TLS Setting issue with SPFx workbench

If you have recently installed or upgraded to Node LTS version v8.9 or later, then you might get the below issue during gulp serve in the local workbench. This issue will not load the workbench and hence the debugging will not be possible. You will see an error as below.

It might seem that the below issue is due to HTTPS not authenticating the local certificate, but I did trust the local certificate (gulp trust-dev-cert), then what went wrong. After much looking around and tries, found out that the issue was not related to local dev certificate or TLS settings but something else. Please refer below to know the cause and the fix for it.

Local workbench in Internet Edge

Web part error in Chrome

Another message related to this might pop up in the Visual Studio code on Chrome Debugging

Issue cause

The issue is because of HTTP2 module that is also initiated with the Gulp serve as can be seen in the below screenshot.

Fix

The fix is to add an environment variable that will allow to the HTTP2 module to be bypassed in this case. The environment variable is NODE_NO_HTTP2 which could be set to 1. After this close and reopen Visual Studio code and gulp serve should work fine.