How to use Microsoft Graph Toolkit with SPFX 1.15.2

Question

I created a new SPFX solution with yo. Then I followed this guide:

Installed with

npm install @microsoft/mgt-spfx

and

npm install @microsoft/mgt-react

Then I changed the init method in the webpart.ts file to following code

protected onInit(): Promise<void> {

    if (!Providers.globalProvider) {
      Providers.globalProvider = new SharePointProvider(this.context);
    }

    return super.onInit();
}

Added the import

import { SharePointProvider, Providers } from '@microsoft/mgt-spfx';

In the tsx component file I changed the render to

public render(): React.ReactElement<IPeoplePickerTestProps> {

    return (
      <div>
        Test
        <Person personQuery="me" view={ViewType.image}></Person>
      </div>
    );
  }

and added the import

import { Person, ViewType } from '@microsoft/mgt-react/dist/es6';

Then I uploaded the latest toolkit spfx package (got it here) to the app catalog (deployed to all sites), builded my solution (gulp bundle --ship, gulp package-solution --ship) and uploaded it to the app catalog. Created a new site collection and installed my solution. Its not working at all. There is nothing rendered except the text "Test". In the console I can see following error which does not really help me:

Toolkit version: 2.6.1 SPFX version: 1.15.2

Tested on different tenants.

Answer 1

I got similar issue, try importing from @microsoft/mgt-react/dist/es6/spfx

so:

import { Person } from '@microsoft/mgt-react/dist/es6/spfx';
import { ViewType } from '@microsoft/mgt-spfx';

Hope that helps