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.
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”.
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.
- Type Environment in Windows 10 search and click on “Edit system environment variables”.
- Once clicked, the below screen will open. Click on “Environment Variables”.
- Go to the Server variables section and click on New.
- Add a new environment variable – “NODE_NO_HTTP2” having value as 1.
- Once this variable is added, the SharePoint Framework web part will load in the local workbench.
NOTE
- 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.
- The above settings and screenshots are taken on Windows 10 machine.
- I was using NODE version 8.12.0, as shown in below screen.
Summary
In this article, we saw how an HTTPS error can be resolved while working with SharePoint Framework web parts.