How to solve the error "Property 'microsoftTeams' does not exist on type 'WebPartContext'."

This post was most recently updated on March 28th, 2023.

2 min read.

This article explains how to fix an issue where you’re just minding your own business, trying to access the Microsoft Teams context in your SPFx webpart’s WebPartContext via the built-in property microsoftTeams, but you run into an issue. Simple stuff, but it’s still easy to run into this one, so I think it’s worthwhile to document the solution somewhere.

Problem

Table of Contents

Most likely, the line causing you issues looks something like this:

this.context.microsoftTeams.

Of like shown below in Visual Studio Code:

The error "Property 'microsoftTeams' does not exist on type 'WebPartContext'." shown in Visual Studio Code's intellisense. — The error “Property ‘microsoftTeams’ does not exist on type ‘WebPartContext’.” is shown in Visual Studio Code’s IntelliSense.

This error will lead to the following output when you actually run the gulp bundle or the gulp build.

==================[ Finished ]==================
 Error - [tsc] src/webparts/yourWebPart/YourWebPart.ts(273,22): error TS2339: Property 'microsoftTeams' does not exist on type 'WebPartContext'.
 Error - [tsc] src/webparts/yourWebPart/YourWebPart.ts(275,22): error TS2339: Property 'microsoftTeams' does not exist on type 'WebPartContext'.
 Error - 'tsc' sub task errored after 5.34 s 
  exited with code 2

Or like shown below during the build:

gulp bundle output: Error - [tsc] src/webparts/modernCalendar/ModernCalendarWebPart.ts(273,22): error TS2339: Property 'microsoftTeams' does not exist on type 'WebPartContext'. Error - [tsc] src/webparts/modernCalendar/ModernCalendarWebPart.ts(275,22): error TS2339: Property 'microsoftTeams' does not exist on type 'WebPartContext'. Error - 'tsc' sub task errored after 5.34 s exited with code 2 — gulp bundle output:
Error – [tsc] src/webparts/modernCalendar/ModernCalendarWebPart.ts(273,22):
error TS2339: Property ‘microsoftTeams’ does not exist on type ‘WebPartContext’.

Reason

Okay, so this is simple… Kind of. The explanation is, anyway!

Let’s rule out the obvious first, though! Let’s do some basic cleanup work. Take the following steps:

Run gulp clean
Restart your VS Code
run gulp bundle

Did that help? No? It didn’t for me, either.

In my case – and possibly in yours as well – you’re not using a recent enough version of SPFx. Microsoft Teams context is only available for versions 1.8+ for SPFx.

Solution

If too old of an SPFx version is indeed your issue, in this other article are the instructions on how to update it. Check it out and see if that helps!

How to update your SPFx webpart to a new version of SharePoint Framework

Et voilà! You should be good then.

Author
Recent Posts

Antti K. Koskela

Developer / Speaker / Consultant at Koskila / Precio Fishbone / Norppandalotti Software Co / Alter - Experience Ideas Ltd

Antti Koskela is a proud digital native nomadic millennial full stack developer (is that enough funny buzzwords? That's definitely enough funny buzzwords!), who works as Solutions Architect for Precio Fishbone, building delightful Digital Workplaces.

He's been a developer from 2004 (starting with PHP and Java), and he's been working on .NET projects, Azure, Office 365, SharePoint and a lot of other stuff. He's also Microsoft MVP for Azure.

This is his personal professional (e.g. professional, but definitely personal) blog.

Latest posts by Antti K. Koskela (see all)