Using SPFx React Controls Context in version 1.17.3
Photo by Andrea Piacquadio
Since React 17 was introduced in version 1.16.0, the problems has began with some PnP Projects. In version 1.17.3 you will get this error when installing the PnP React Controls, so you must wait for the Repo be updated.
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-quill@1.3.5
npm WARN Found: react@17.0.1
npm WARN node_modules/react
npm WARN peer react@">=16.8.0 <19.0.0" from @fluentui/foundation-legacy@8.2.41
npm WARN node_modules/@fluentui/foundation-legacy
npm WARN @fluentui/foundation-legacy@"^8.2.41" from @fluentui/react@8.110.2
npm WARN node_modules/@microsoft/sp-component-base/node_modules/@fluentui/react
npm WARN 5 more (@fluentui/react, @fluentui/react, @fluentui/react, ...)
npm WARN 84 more (@fluentui/react, @fluentui/react-compose, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^0.14.9 || ^15.3.0 || ^16.0.0" from react-quill@1.3.5
npm WARN node_modules/react-quill
npm WARN react-quill@"1.3.5" from @pnp/spfx-controls-react@3.14.0
npm WARN node_modules/@pnp/spfx-controls-react
npm WARN
npm WARN Conflicting peer dependency: react@16.14.0
npm WARN node_modules/react
npm WARN peer react@"^0.14.9 || ^15.3.0 || ^16.0.0" from react-quill@1.3.5
npm WARN node_modules/react-quill
npm WARN react-quill@"1.3.5" from @pnp/spfx-controls-react@3.14.0
npm WARN node_modules/@pnp/spfx-controls-react
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated spfx-uifabric-themes@0.9.0: spfx-uifabric-themes got replaced by hTWOo - https://my.n8d.at/hTWOo and check the updated documentation for this package: https://lab.n8d.studio/spfx-uifabric-themes/In version 1.16.1 to use the PeoplePicker Control the workaround was give context as any in your Webpart.ts
context: this.context as anyNow if you want to use them in version 1.17.3, try this workaround
//Webpart.ts
import { BaseClientSideWebPart, WebPartContext } from '@microsoft/sp-webpart-base';
...
context: this.context as WebPartContext
//In your Control.tsx
import { PeoplePicker, PrincipalType } from "@pnp/spfx-controls-react/lib/PeoplePicker";
...
<PeoplePicker
context={this.props.context as any}
titleText="People Picker"
personSelectionLimit={3}
//groupName={"Team Site Owners"} // Leave this blank in case you want to filter from all users
showtooltip={true}
required={true}
disabled={false}
//onChange={this._getPeoplePickerItems}
//showHiddenInUI={false}
principalTypes={[PrincipalType.User]}
resolveDelay={1000} />
