Issue when creating new project with existing spfx project using teams toolkit

[bhoomesh-spe]

Hello All,

I have created a default SPFx project as mentioned in the below link

https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part

It is working as expected while I execute the gulp serve command. Please refer to the below screenshot as a proof.

Now, I am trying to create a new team project with an existing SPFx project.

For that I have taken reference from the below link,

https://learn.microsoft.com/en-us/microsoftteams/platform/sbs-gs-spfx?tabs=vscode%2Cviscode&tutorial-step=2

I have selected the "import an Existing SPFx Solution" option in Step-6.

When I try to preview my app in Teams using the "Preview Your Teams App(F5)" option from Visual Studio Code.

It threw the below error in the Teams

Can anyone help me with the same?

Thanks

[HuihuiWu-Microsoft]

Hi @bhoomesh-spe, thanks for reporting this to us! Could you help provide more info for me to better troubleshoot: 1> In the error page in Teams, click 'TECHINICAL DETAILS' and attach the error message 2> Please help check appPackage\manifest.local.json file and see whether your web part is added correctly in staticTabs array 3> After you click 'Preview your Teams App(F5)' button and Teams launched, could you help confirm whether web part is successfully hosted locally(you could check https://localhost:4321/temp/manifests.js and see whether anything wrong )

BTW, I believe another stackoverflow issue should be duplicated with this one, I'll use this GitHub issue to track.

[bhoomesh-spe]

Please refer to the below screenshot for TECHINICAL DETAILS' and error message

[HuihuiWu-Microsoft]

@bhoomesh-spe Could you help upgrade SPFx and see whether you still have the issue as mentioned in https://github.com/SharePoint/sp-dev-docs/issues/9178?

[bhoomesh-spe]

I have upgraded SPFx and created a new project and tried to create a new project using the teams tool kit but it threw me the below error when trying to preview it in the teams. Please check the below screenshot

[Error] - code:AppStudioPlugin.TeamsAppCreateConflict, message: Unable to create Teams app, which may be because your app ID is conflicting with another app's ID in your tenant.

[HuihuiWu-Microsoft]

Hi @bhoomesh-spe, give the error indicating Teams app conflict, could you help check whether you already provisioned the app id before previewing it in Teams? This may happen if another one is also working on this project or you switched account in the same tenant. You could check more details at https://github.com/OfficeDev/teams-toolkit/wiki/How-to-Switch-Microsoft-365-Tenant#409-conflict-error-for-teams-app-creation

[bhoomesh-spe]

I logged in with another user account and tried to preview it in the teams again. Also, I have been attempting to "Provision" option from the Teams Tool Kit. But I was facing the same error. Please refer to the below screenshot.

How can I remove the non-used app ID from my tenant? How can I change the app ID to resolve the above issue? Do I need to change the ID in both the existing SPFx app and the newly created Teams app using Teams Toolkit?

[HuihuiWu-Microsoft]

Hi @bhoomesh-spe 1> if you want to use the existing ID, you could login to Teams Dev portal with the account that created the Teams app and grant owner permission to current account; 2> if you want to use a new one, you could delete the Teams app ID value(TEAMS_APP_ID) in env.{env}.json and go on with preview/provision. In this case, you could choose to ignore the old ID or login to Teams Dev portal with the account that created the app and delete the app

[microsoft-github-policy-service[bot]]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within 3 days of this comment. If it is closed, feel free to comment when you are able to provide the additional information and we will re-investigate.

[microsoft-github-policy-service[bot]]

Due to lack of details for further investigation, we will archive the issue for now. In case you still have following-up questions on this issue, please always feel free to reopen the issue by clicking ‘reopen issue’ button below the comment box. We will get back to you as soon as possible.