Using SPFx React Controls Context in version 1.17.3

Pexels Andrea Piacquadio 3822850
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 any

Now 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} />
            
joao

Joao Livio

Joao is a Consultant with more than 27 years of experience in various technologies, he has been working with SharePoint since version 2003, an area in which he decided to specialize. Today he works in the Modern Workplace area with focus in Migrations to Office/Microsoft 365 as well in the Ecosystem Development, having fun in amazing projects and in amazing Corporations and Clients. MCP, MCTS, MVP Alumni, Nintext and Certified Lean Specialist

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *