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

Posted by

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.

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

VSCodeDebugConsole_HTTP2Issue

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.

VisualCodeMessage_SPFxGulpissue

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.

TLSIssueNodeSPFx

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s