SPFX setup for pnp

So I think there are a few problems that might be the source of your problem here and I will try to point out all things I find problematic.

1. using @pnp/generator-spfx - this product is deprecated and you may find this info in the https://github.com/pnp/generator-spfx readme. That is why I would suggest to uninstall it as it one of the reasons it requires you to use old version of Node.js which brings me to the second point.
2. old version of Node.js - the version you use is not supported and since SPFx 1.20 you should be using Node 18. I would even suggest using SPFx 1.21.1 and now Node 22 (>22.14.0) which is the latest LTS node version which will bring you to a up to date supported state. If you run the 'Check dependencies' action in SPFx Toolkit VS Code extension in the screenshot you provided it most probably will bring up that you are using wrong version of Node.js for SPFx 1.21.1 which is the supported we added just yesterday

Also it would be best if you could clarify if this problem you see in a newly scaffolded project (sorry I could not find this info) or in some older project you created for a previous version of SPFx. You may find the version the SPFx version used in your project in the .yo-rc.json file in the version property. I am asking as we should first align the version of node, gulp with the SPFx version of your project to make it all compatible and working. You may find the compatibility matrix here https://learn.microsoft.com/en-us/sharepoint/dev/spfx/compatibility

If you have this problem in a newly created SPFx project this is what I would suggest.

1. Install node 22.14.0
2. open SPFx Toolkit VS Code and run the 'check dependencies' action it will check your env and suggest to install all needed global dependencies
3. after SPFx Toolkit will install everything you need create a new project using SPFx Toolkit 'Create a new project' action. Wait for the npm install to finish which takes places after SPFx Toolkit creates a project and opens VS Code in you newly created project. It is super important for it to finish
4. then use SPFx Toolkit task view and use the gulp publish task to check if it will build properly and create a package. If so I guess you are ready to go and serve as well

Last peace of advice. Usually in SPFx development the biggest problem is the need to use multiple instances of Node.js at once. One older Node version for some older tooling or SPFx project like you have now, and a new one for the latest SPFx version etc. For that you may use either NVM or NVS to manage multiple versions of Node and SPFx version on a single machine and the best part SPFx Toolkit will also understand your setup and will support that as well. To setup either NVM or NVS for that you may follow the guidance from the blog post I created sometime ago https://pnp.github.io/blog/post/spfx-setup-part1-nvm-nvs/ In that blog post I also provide info how it goes with SPFx Toolkit

Let me know if the above answer brought some clarity and help, and if you need any more suggestions. SPFx development may be challenging at start so don't worry that something is not working at the beginning 👍

Happy Coding!

Actually i found the alternative of setup using Visual studio code -Spfx extension. So once you install these extension you don't have to worry about. the extension itself does the required package installation, their resepctive dependencies. these extension will guide you step by step to create the solution based on PnPSpfx.

these works fine for me.

but when i tried using command prompt i still get generator in not a function error. For which i am looking out for resolution.

This error almost always means that Gulp cannot find the task definitions, which are typically located within your project's local node_modules folder.

Make absolutely sure your command prompt or terminal is open inside the root folder of your specific SPFx project. If the error persists, try deleting node_modules folder and reinstalling it using npm -install.