Ph7x Systems (by Joao LIVIO)

Using SPFx React Controls Context in version 1.17.3

by · Published · Updated

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 Livio

João has over two decades of IT experience and holds several certifications, including Microsoft Certified Professional (MCP) and Microsoft Certified Technology Specialist (MCTS). He is also a Lean Specialist with expertise in Lean Management, Nintex, and other training programs from LinkedIn and Udemy, including exams related to Azure and the Power Platform. As a Consultant and Advisor for Modern Work, João assists clients in unlocking their digital potential and optimizing productivity and collaboration. His approach is agnostic to technology, focusing on practical solutions that align with business goals. He has consistently been recognized as a Microsoft Most Valuable Professional (MVP) for 10 consecutive years. His commitment to excellence extends beyond technical expertise; he also values consistency, mental health, creative thinking, teamwork, and fun at work. João believes that learning every day within a team context is the key to continuous improvement.

You may also like...

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.