0

I am new to SharePoint custom web part development. I am following https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part to create a custom web part. I keep facing different types of issues when creating a project.

First, I follow https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-development-environment to setup my environment. After completing the setup and execute yo @microsoft/Sharepoint. I got below error: enter image description here

So, I downgraded my sharepoint-generator version from 1.14x to 1.11.x/1.12.x. I am able to create a project, but when I use "gulp serve", an error occurs again: gulp --task ReferenceError: primordials is not defined at fs.js:45:5 at req_ (C:\Users\username\CustomWebPart\spfx-40-fantastics-master\node_modules\natives\index.js:143:24) at Object.req [as require] (C:\Users\username\CustomWebPart\spfx-40-fantastics-master\node_modules\natives\index.js:55:10) at Object. (C:\Users\username\CustomWebPart\spfx-40-fantastics-master\node_modules\vinyl-fs\node_modules\graceful-fs\fs.js:1:37) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18)

Current Setting: npm list -g --depth=0 +-- @angular/[email protected] +-- @microsoft/[email protected] +-- @microsoft/[email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] `-- [email protected]

node --version v14.15.0

npm -v 6.14.8

Can anyone help me? I am really frustrated and I don't know which parts when wrong.

----Update @20220421----

I followed Rob action to uninstall and install the gulp-cli. still no luck. C:\Windows\system32>npm list -g --depth=0 C:\Users(username)\AppData\Roaming\npm +-- @angular/[email protected] +-- @microsoft/[email protected] +-- @microsoft/[email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] `-- [email protected]

C:\Windows\system32>node --version v14.15.0

C:\Windows\system32>npm -v 6.14.8

C:\Windows\system32>npm uninstall gulp-cli --global removed 254 packages in 2.677s

C:\Windows\system32>npm uninstall gulp --global up to date in 0.033s

C:\Windows\system32>npm uninstall @microsoft/generator-sharepoint --global removed 1433 packages in 10.868s

C:\Windows\system32>npm install gulp-cli --global C:\Users(username)\AppData\Roaming\npm\gulp -> C:\Users(username)\AppData\Roaming\npm\node_modules\gulp-cli\bin\gulp.js

[email protected] postinstall C:\Users(username)\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\es5-ext node -e "try{require('./_postinstall')}catch(e){}" || exit 0

C:\Windows\system32>npm install --global @microsoft/[email protected]

[email protected] install C:\Users(username)\AppData\Roaming\npm\node_modules@microsoft\generator-sharepoint\node_modules\node-sass node scripts/install.js

Cached binary found at C:\Users(username)\AppData\Roaming\npm-cache\node-sass\4.14.1\win32-x64-83_binding.node

[email protected] postinstall C:\Users(username)\AppData\Roaming\npm\node_modules@microsoft\generator-sharepoint\node_modules\node-sass node scripts/build.js

Binary found at C:\Users(username)\AppData\Roaming\npm\node_modules@microsoft\generator-sharepoint\node_modules\node-sass\vendor\win32-x64-83\binding.node Testing binary Binary is fine

C:\Windows\system32>cd C:\Users(username)\CustomWebPart\NewVersionTest

C:\Users(username)\CustomWebPart\NewVersionTest>yo @microsoft/sharepoint

Let's create a new SharePoint solution. ? What is your solution name? NewVerTest ? Only SharePoint Online (latest) is supported. For earlier versions of SharePoint (2016 and 2019 ) please use the 1.4.1 version of the generator. SharePoint Online only (latest) ? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sit es immediately without running any feature deployment or adding apps in sites? No ? Will the components in the solution require permissions to access web APIs that are unique and n ot shared with other components in the tenant? No ? Which type of client-side component to create? WebPart Add new Web part to solution new-ver-test. ? What is your Web part name? NewVerTest ? What is your Web part description? no ? Which framework would you like to use? No JavaScript framework

Error @microsoft/sharepoint

Trying to copy from a source that does not exist: C:\Users(username)\AppData\Roaming\npm\node_modules@microsoft\generator-sharepoint\lib\generators\solution\templates\spo\tsconfig.json

C:\Users(username)\CustomWebPart\NewVersionTest>npm list --depth=0 -g C:\Users(username)\AppData\Roaming\npm +-- @angular/[email protected] +-- @microsoft/[email protected] +-- @microsoft/[email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] `-- [email protected]

C:\Users(username)\CustomWebPart\NewVersionTest>npm list gulp C:\Users(username)\CustomWebPart `-- [email protected]

Improve this question

2 Answers 2

Reset to default
0

You can set up SharePoint Framework Development Environment and create a Web part by following these steps in this document.

Please download node.js version 16.14.2 (includes npm 8.5.0).

Note: Microsoft is providing this information as a convenience to you. The sites are not controlled by Microsoft. Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. Please make sure that you completely understand the risk before retrieving any suggestions from the above link.

Best Regards,

Zella Zhang

Improve this answer
3
  • I hate to have to disagree with another person's answer, but the SharePoint Framework is not compatible with Node.js 16.x. You can either stick with Node.js v14.15.0 or install a newer version of Node.js 14.x. Please see the SharePoint Framework development tools and libraries compatibility | SPFx development environment compatibility (docs.microsoft.com/en-us/sharepoint/dev/spfx/…) for more information. Commented Apr 20, 2022 at 10:00
  • I saw the docs from Microsoft, it said that using Node.js v14.15.0+ instead of Node.js 16.x Commented Apr 21, 2022 at 9:16
  • I'm sorry that I overlooked this version compatibility issue. I see that you said that you successfully created the project using an older version of nodejs and sharepoint generator. (node.js 10.24.1, microsoft/generator-sharepoint 1.10.0, gulp3.9.1, npm 6.14.12 and yo 3.1.1 . ) I'm glad to hear you solve the problem ,if you have any issue about SharePoint, you are welcome to raise a ticket in this forum. Thanks for your understanding and support. Commented Apr 22, 2022 at 9:58
0

Microsoft recently changed from instructing developers to install Gulp to instead instructing them to install Gulp-CLI. Having both installed globally may be the cause of your issues.

Try running npm list -g --depth=0 gulp to see if you get a result. If you do then, uninstall Gulp-CLI, uninstall Gulp, an then reinstall Gulp-CLI.

npm uninstall gulp-cli --global npm uninstall gulp --global npm install gulp-cli --global

Also, the earliest version of the SharePoint Framework that is compatible with Node.js v14.15.0 is SPFx v1.12.1. So please ensure you have a compatible version of the Yeoman SharePoint generator installed. I would suggest trying SPFx v1.13.1 to start. If everything is working, then I would try SPFx 1.14.0.

You can install a specific version of the Yeoman SharePoint generator using this command

npm install --global @microsoft/generator-sharepoint@[version number]

For example:

npm install --global @microsoft/[email protected]

For more information see SharePoint Framework development tools and libraries compatibility | SPFx development environment compatibility.

SPFx development environment compatibility

Finally, Microsoft made several changes to the web part template between SPFx v1.13.1 and v1.14.0. If you use a version of SPFx v1.13.1 or earlier, you may want to use the first couple modules in the Extend Microsoft SharePoint – Associate learning path on Microsoft Learn. The content in the modules of this learning path are currently based on SPFx v1.13.1 so they will more closely match what you will be doing.

Extend Microsoft SharePoint – Associate

Improve this answer
4
  • Hi, Thank you so much. However, I still cannot create the project even I followed your action. The Extend Microsoft SharePoint – Associate is really helpful!! You are my life-saver!!! Commented Apr 21, 2022 at 9:29
  • The only thing I can think of is cleaning your npm cache using npm cache clean --force then trying to create the web part again. I'm out of ideas if that doesn't work. Commented Apr 21, 2022 at 11:17
  • I have tried to use npm cache clean --force, still no luck. If I use older version nodejs and sharepoint generator, I can create the project successfully. I will follow Extend Microsoft SharePoint – Associate to learn. Thanks for your great help!! Commented Apr 22, 2022 at 2:37
  • I have changed to use nodejs 10.24.1, microsoft/generator-sharepoint 1.10.0, gulp3.9.1, npm 6.14.12 and yo 3.1.1 . Commented Apr 22, 2022 at 2:39

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.