Error building the client side webparts behind corporate proxy

This post is a contribution from Aravinda Devagiri, an engineer with the SharePoint Developer Support team

Recently I worked on a case, while trying to build simple Client Side webpart, when we run the gulp trust-dev-cert to install developer certificate (to preview the webpart) we get the error.

 ../gulp trust-dev-cert
 
Error: Cannot find module '@microsoft/sp-build-web'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\bin\helloworld-webpart\gulpfile.js:4:15)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)

The most probable reason could be that the you are working behind corporate proxy.
You have to setup node.js and get npm to work behind a proxy by setting the proxy and https-proxy settings.

Below are the commands to configure proxy setting for node.js.

 npm config set proxy https://proxyaddress.com:8080
npm config set https-proxy https://proxyaddress.com:8080

Create a new project with the Yeoman generator and then execute the cmd gulp trust-dev-cert and gulp serve to preview the webpart in local work bench.

If you still see the issue, you may have to check if you have the latest version of NodeJS using node -v. It should return the current LTS version.

Now create new project and before installing the developer certificate, run the cmd npm install to install the package and any other packages it depends on.

Here is the sequence of the cmds run to create the webpart.

  • md helloworld-webpart
  • cd helloworld-webpart
  • yo @microsoft/sharepoint
  • npm install
  • gulp trust-dev-cert
  • gulp serve

References:

/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part https://jjasonclark.com/how-to-setup-node-behind-web-proxy/