Unable to Create New App: Tab with SPFx

[ungsdev]

Describe the bug
When trying to create a new SPFx-based tab app, the following error occurs.

[2024-08-02T02:45:35.743Z] [Info] - yo@latest not found, installing...
[2024-08-02T02:45:35.743Z] [Info] - Start installing...
[2024-08-02T02:45:35.745Z] [Error] - Failed to execute npm install yo@latest
[2024-08-02T02:45:35.746Z] [Error] - Failed to install yo@latest, error = 'NpmInstallFailed: Unable to run 'npm install' due to spawn EINVAL'
[2024-08-02T02:45:35.749Z] [Error] - code:SPFx.LatestPackageInstallFailed, message: Unable to set up SPFx environment in HOME/.fx folder. To set up global SPFx environment, follow [Set up your SharePoint Framework development environment | Microsoft Learn](https://aka.ms/teamsfx-spfx-dev-environment-setup).

My SPFx environment is set up correctly according to the documentation provided in the error message. In fact, I have been working well with it until recently.

Here are the Node version and the list of globally installed Node modules in my environment.

PS C:\Users\ungsd> node -v
v18.20.4
PS C:\Users\ungsd> npm ls --global --depth=0
C:\Program Files\nodejs -> .\
├── @microsoft/generator-sharepoint@1.19.0
├── corepack@0.28.0
├── gulp-cli@3.0.0
├── npm@10.7.0
└── yo@5.0.0

To Reproduce
Steps to reproduce the behavior:

1. Go to Visual Studio Code > Teams Toolkit Extension
2. Click on 'Create a New App'
3. Select 'Tab' option
4. Select 'SPFx' option
5. Select 'Create New SPFx Solution' option
6. Select 'Install the latest SPFx locally in Teams Toolkit directory' option
7. Proceed with the remaining steps
8. Check OUTPUT console to see error

Expected behavior
The new app should be created without any errors.

Screenshots
If applicable, add screenshots to help explain your problem.

VS Code Extension Information (please complete the following information):

• OS: Windows 11 / 23H2 / 22631.3737
• Version: v5.8.1

Additional context
Additionally, the following error occurs when selecting the ‘Use globally installed SPFx’ option instead 'Install the latest SPFx locally in Teams Toolkit directory'.

[2024-08-02T02:57:02.728Z] [Error] - code:SPFx.DevEnvironmentSetupError, message: Your SPFx development environment is not set up correctly. Click "Get Help" to set up the right environment.
 Help link: https://aka.ms/teamsfx-spfx-dev-environment-setup

It seems there is an issue with finding the globally installed Node modules in the environment. This might be related to the issue below.

nodejs/node#52554 (comment)

[HuihuiWu-Microsoft]

@ungsdev Thanks for reporting this issue to us. We're working on it and will update to you soon.

[HuihuiWu-Microsoft]

@ungsdev The fix has been merged and please expect that in our next prerelease. I'll close this one first and feel free to reopen if it doesn't work with next build.

[ungsdev]

To someone who needs an immediate alternative: You can create a new SPFx-based tab app using the teamsapp CLI.

https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/teams-toolkit-cli?pivots=version-three

PS C:\Users\ungsd> npm install -g @microsoft/teamsapp-cli^C
PS C:\Users\ungsd> npm ls --global --depth=0
C:\Program Files\nodejs -> .\
├── @microsoft/generator-sharepoint@1.19.0
├── @microsoft/generator-sharepoint@1.19.0
├── @microsoft/teamsapp-cli@3.0.2
├── corepack@0.28.0
├── gulp-cli@3.0.0
├── npm@10.7.0
└── yo@5.0.0

PS C:\Users\ungsd> teamsapp new
Some arguments/options are useless because the interactive mode is opened. If you want to run the command non-interactively, add '--interactive false' after your command.
? New Project Tab
? App Features Using a Tab SPFx
? SharePoint Solution Create New SPFx Solution
? SharePoint Framework Use globally installed SPFx
? Framework React
? Name for SharePoint Framework Web Part mySPFxWP
? Directory where the project folder will be created in (./) 
? Directory where the project folder will be created in ./
? Application Name tabwithspfx
████████████████████  100% | [4/4] Scaffolding project  (√) Done.
████████████████████  100% | [1/1] Create  (√) Done.
Project created at: C:\Users\ungsd\tabwithspfx
PS C:\Users\ungsd>

[React365-Chris]

what if you are adding a new SPFX web part as a tab in an existing teams toolkit project that has other spfx tabs?

[HuihuiWu-Microsoft]

@React365-Chris You could try teamsapp add with teamsapp CLI. See teamsapp CLI manual guide for more details

[React365-Chris]

I tried that first. I use the CLI more than VSCode. I have the same error, which is unfixable.

[HuihuiWu-Microsoft]

@React365-Chris Yes, I just checked and that's because TTK will first detect globally installed SPFx version which will cause failure due to nodejs/node#52554 (comment) while teamsapp create doesn't if user manually choose use globally installed SPFx. Please expect our next build which will ship soon.