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.
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