Webpart not loading in multi-tab personal app in Teams

[MWDevRepo]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

Windows

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [X] 💥 Microsoft Edge
• [X] 💥 Google Chrome
• [X] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx v1.11.0
• Node v10.24.1
• Edge v105.0.1343.53
• Chrome v106.0.5249.62
• Firefox v105.0.1

Describe the bug / error

I have been following the "Creating multi-tab Microsoft Teams personal app with SharePoint Framework" YouTube tutorial from the Microsoft 365 Community channel and the tutorial on the Docs and have run into the issue that the webparts deployed for the teams tabs aren't loading.

Giving me the following errors depending on the browser: Chrome: Error: Error initializing application. Error: TypeError: Cannot read properties of undefined (reading 'componentType') Edge: Error: Error initializing application. Error: TypeError: Cannot read properties of undefined (reading 'componentType') Firefox: Error: Error initializing application. Error: TypeError: i is undefined

My methods of deploying the app were as follows:

• Create the app manifest in the Developer Portal App in Teams, fill out the necessary fields and download the manifest. Deploy the SPFx Project .sppkg to the appcatalog. Finally, import the app manifest in Teams.
• Create the app manifest in the Developer Portal App in Teams, fill out the necessary fields and download the manifest. Copy the files into the SPFx projects "teams" folder with the files inside of the root of a .zip folder. Deploy the SPFx Project .sppkg to the appcatalog which failed because it violates the package structure guidelines.

Link to the project files: repo

Steps to reproduce

1. Generate a SPFx project with the yeoman generator
2. Set up to basic webparts to use for the test
3. Follow either tutorial to deploy the app into teams

Expected behavior

The webparts load successfully in the teams personal app tabs

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AJIXuMuK]

@MWDevRepo - there were some issues with the version of Teams SDK used in SPFx solutions. The version has been bumped and the issue should be resolved by now. Could you please check it on your end?

[MWDevRepo]

@AJIXuMuK I managed to get it to work, by following the updated docs but having to manually upload the manifest zip into teams.

[ghost]

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues