In Focus

SharePoint Framework (SPFx) Issue - Cannot Connect Securely To This Page

In this article, you will learn about one of the SharePoint Framework (SPFx) issues and how to resolve that.

While working on SharePoint Framework projects, you might face an issue - When you run the gulp serve command and check your Local Workbench, the browser shows the error – “Can’t connect securely to this page” as shown below.
 
Below are the screenshots which show the error on Edge and Google Chrome browser respectively.
 
SharePoint Framework (SPFx) Issue - Cannot Connect Securely To This Page
 
SharePoint Framework (SPFx) Issue - Cannot Connect Securely To This Page
 
At first look, it might seem that the above issue is due to HTTPS not authenticating the local certificate, however, I did trust the local certificate by using the command - gulp trust-dev-cert, and still, the issue was there. After more debugging, I found that the issue was not related to local dev certificate or TLS settings.
 

Reason for the issue

 
The issue arose because of the HTTP2 module that is also initiated with the Gulp Serve command as can be seen in the below screenshot. While running the gulp serve, it shows the message – “The HTTP module is an experimental API”.
 
SharePoint Framework (SPFx) Issue - Cannot Connect Securely To This Page
 

Issue Resolution

 
For the solution of this issue, you need to add an environment variable that will allow the HTTP2 module to be bypassed in this case. Below are the steps to add the environment variable to resolve the issue.
  1. Type Environment in Windows 10 search and click on “Edit system environment variables”.

    SharePoint Framework (SPFx) Issue - Cannot Connect Securely To This Page

  2. Once clicked, the below screen will open. Click on “Environment Variables”.

    SharePoint Framework (SPFx) Issue - Cannot Connect Securely To This Page

  3. Go to the Server variables section and click on New.

    SharePoint Framework (SPFx) Issue - Cannot Connect Securely To This Page

  4. Add a new environment variable – “NODE_NO_HTTP2” having value as 1.

    SharePoint Framework (SPFx) Issue - Cannot Connect Securely To This Page

  5. Once this variable is added, the SharePoint Framework web part will load in the local workbench.
 
NOTE
  1. After adding the environment variable, close and reopen Visual Studio Code (editor) and then gulp serve should work fine and web part will be visible in local workbench.
  2. The above settings and screenshots are taken on Windows 10 machine.
  3. I was using NODE version 8.12.0, as shown in below screen. 

    SharePoint Framework (SPFx) Issue - Cannot Connect Securely To This Page

Summary

 
In this article, we saw how an HTTPS error can be resolved while working with SharePoint Framework web parts.