Error building the client side webparts behind corporate proxy

Published May 01 2019 04:15 PM 507 Views
Microsoft

First published on TECHNET on Jul 17, 2018
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 http://proxyaddress.com:8080
npm config set https-proxy http://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

 

 

    • npm install

 

    • gulp trust-dev-cert

 

    • gulp serve



References:

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

%3CLINGO-SUB%20id%3D%22lingo-sub-510089%22%20slang%3D%22en-US%22%3EError%20building%20the%20client%20side%20webparts%20behind%20corporate%20proxy%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-510089%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSTRONG%3E%20First%20published%20on%20TECHNET%20on%20Jul%2017%2C%202018%20%3C%2FSTRONG%3E%20%3CBR%20%2F%3EThis%20post%20is%20a%20contribution%20from%20Aravinda%20Devagiri%2C%20an%20engineer%20with%20the%20SharePoint%20Developer%20Support%20team%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3CBR%20%2F%3ERecently%20I%20worked%20on%20a%20case%2C%20while%20trying%20to%20build%20simple%20Client%20Side%20webpart%2C%20when%20we%20run%20the%20gulp%20trust-dev-cert%20to%20install%20developer%20certificate%20(to%20preview%20the%20webpart)%20we%20get%20the%20error.%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%0A%3CDIV%3E..%2Fgulp%20trust-dev-cert%20%3CBR%20%2F%3E%3CBR%20%2F%3EError%3A%20Cannot%20find%20module%20'%40microsoft%2Fsp-build-web'%20%3CBR%20%2F%3Eat%20Function.Module._resolveFilename%20(module.js%3A527%3A15)%20%3CBR%20%2F%3Eat%20Function.Module._load%20(module.js%3A476%3A23)%20%3CBR%20%2F%3Eat%20Module.require%20(module.js%3A568%3A17)%20%3CBR%20%2F%3Eat%20require%20(internal%2Fmodule.js%3A11%3A18)%20%3CBR%20%2F%3Eat%20Object.%3CANONYMOUS%3E%20(D%3A%5Cbin%5Chelloworld-webpart%5Cgulpfile.js%3A4%3A15)%20%3CBR%20%2F%3Eat%20Module._compile%20(module.js%3A624%3A30)%20%3CBR%20%2F%3Eat%20Object.Module._extensions..js%20(module.js%3A635%3A10)%20%3CBR%20%2F%3Eat%20Module.load%20(module.js%3A545%3A32)%20%3CBR%20%2F%3Eat%20tryModuleLoad%20(module.js%3A508%3A12)%20%3CBR%20%2F%3Eat%20Function.Module._load%20(module.js%3A500%3A3)%3C%2FANONYMOUS%3E%3C%2FDIV%3E%0A%3CP%3E%3CBR%20%2F%3E%3CBR%20%2F%3EThe%20most%20probable%20reason%20could%20be%20that%20the%20you%20are%20working%20behind%20corporate%20proxy.%20%3CBR%20%2F%3EYou%20have%20to%20setup%20node.js%20and%20get%20npm%20to%20work%20behind%20a%20proxy%20by%20setting%20the%20proxy%20and%20https-proxy%20settings.%20%3CBR%20%2F%3E%3CBR%20%2F%3EBelow%20are%20the%20commands%20to%20configure%20proxy%20setting%20for%20node.js.%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%0A%3CDIV%3Enpm%20config%20set%20proxy%20%3CA%20href%3D%22http%3A%2F%2Fproxyaddress.com%3A8080%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttp%3A%2F%2Fproxyaddress.com%3A8080%3C%2FA%3E%20%3CBR%20%2F%3Enpm%20config%20set%20https-proxy%20%3CA%20href%3D%22http%3A%2F%2Fproxyaddress.com%3A8080%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Ehttp%3A%2F%2Fproxyaddress.com%3A8080%3C%2FA%3E%3C%2FDIV%3E%0A%3CP%3E%3CBR%20%2F%3E%3CBR%20%2F%3ECreate%20a%20new%20project%20with%20the%20Yeoman%20generator%20and%20then%20execute%20the%20cmd%20gulp%20trust-dev-cert%20and%20gulp%20serve%20to%20preview%20the%20webpart%20in%20local%20work%20bench.%20%3CBR%20%2F%3E%3CBR%20%2F%3EIf%20you%20still%20see%20the%20issue%2C%20you%20may%20have%20to%20check%20if%20you%20have%20the%20latest%20version%20of%20NodeJS%20using%20node%20-v.%20It%20should%20return%20the%20current%20LTS%20version.%20%3CBR%20%2F%3E%3CBR%20%2F%3ENow%20create%20new%20project%20and%20before%20installing%20the%20developer%20certificate%2C%20run%20the%20cmd%20npm%20install%20to%20install%20the%20package%20and%20any%20other%20packages%20it%20depends%20on.%20%3CBR%20%2F%3E%3CBR%20%2F%3EHere%20is%20the%20sequence%20of%20the%20cmds%20run%20to%20create%20the%20webpart.%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%0A%3CUL%3E%0A%3CUL%3E%0A%3CLI%3Emd%20helloworld-webpart%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CUL%3E%0A%3CLI%3Ecd%20helloworld-webpart%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CUL%3E%0A%3CLI%3Eyo%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F41501%22%20target%3D%22_blank%22%3E%40microsoft%3C%2FA%3E%2Fsharepoint%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CUL%3E%0A%3CLI%3Enpm%20install%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CUL%3E%0A%3CLI%3Egulp%20trust-dev-cert%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CUL%3E%0A%3CUL%3E%0A%3CLI%3Egulp%20serve%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3C%2FUL%3E%0A%3CP%3E%3CBR%20%2F%3E%3CBR%20%2F%3EReferences%3A%20%3CBR%20%2F%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fget-started%2Fbuild-a-hello-world-web-part%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3E%20https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fget-started%2Fbuild-a-hello-world-web-part%20%3C%2FA%3E%20%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Fjjasonclark.com%2Fhow-to-setup-node-behind-web-proxy%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%20https%3A%2F%2Fjjasonclark.com%2Fhow-to-setup-node-behind-web-proxy%2F%20%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-510089%22%20slang%3D%22en-US%22%3E%3CP%3EFirst%20published%20on%20TECHNET%20on%20Jul%2017%2C%202018%20This%20post%20is%20a%20contribution%20from%20Aravinda%20Devagiri%2C%20an%20engineer%20with%20the%20SharePoint%20Developer%20Support%20teamRecently%20I%20worked%20on%20a%20case%2C%20while%20trying%20to%20build%20simple%20Client%20Side%20webpart%2C%20when%20we%20run%20the%20gulp%20trust-dev-cert%20to%20install%20developer%20certificate%20(to%20preview%20the%20webpart)%20we%20get%20the%20error.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-510089%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%20Support%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Co-Authors
Version history
Last update:
‎Apr 30 2021 12:46 PM
Updated by: