Cannot use TaxonomyPicker if @pnp/spfx-property-controls is used : conflicting dependencies

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

Please specify what version of the library you are using: [

• @pnp/spfx-controls-react: 3.13.0
• @pnp/spfx-property-controls: 3.12.0

]

Expected / Desired Behavior / Question

I'd like to be able to use both libraries in my projects.

Observed Behavior

When both libraries are added as dependencies, some import will break the bundling.

For example, if I use PropertyFieldSitePicker and ModernTaxonomyPicker in a webpart, gulp bundle fails with this error (relevant error only):

Error - [webpack] 'dist':
./node_modules/.pnpm/@pnp+spfx-controls-react@3.13.0_lozypg5aq7ao6qbkylypqd4zei/node_modules/@pnp/spfx-controls-react/lib/services/SPTaxonomyService.js
Module not found: Error: Can't resolve '@pnp/odata/parsers' in 'C:/code/repro/pnpcontrolsmix/node_modules/.pnpm/@pnp+spfx-controls-react@3.13.0_lozypg5aq7ao6qbkylypqd4zei/node_modules/@pnp/spfx-controls-react/lib/services'
resolve '@pnp/odata/parsers' in 'C:/code/repro/pnpcontrolsmix/node_modules/.pnpm/@pnp+spfx-controls-react@3.13.0_lozypg5aq7ao6qbkylypqd4zei/node_modules/@pnp/spfx-controls-react/lib/services'

(full log attached : buildlog.txt)

Here's the dep tree regarding @pnp/odata usage:

pnpm why @pnp/odata

pnpcontrolsmix@0.0.1 C:\code\repro\pnpcontrolsmix

dependencies:
@pnp/spfx-controls-react 3.13.0
└─┬ @pnp/sp 2.5.0
  └── @pnp/odata 2.5.0
@pnp/spfx-property-controls 3.12.0
├── @pnp/odata 1.3.11
├─┬ @pnp/sp 1.3.11
│ └── @pnp/odata 1.3.11 peer
├─┬ @pnp/sp-clientsvc 1.3.11
│ ├── @pnp/odata 1.3.11 peer
│ └─┬ @pnp/sp 1.3.11 peer
│   └── @pnp/odata 1.3.11 peer
└─┬ @pnp/sp-taxonomy 1.3.11
  ├── @pnp/odata 1.3.11 peer
  ├─┬ @pnp/sp 1.3.11 peer
  │ └── @pnp/odata 1.3.11 peer
  └─┬ @pnp/sp-clientsvc 1.3.11 peer
    ├── @pnp/odata 1.3.11 peer
    └─┬ @pnp/sp 1.3.11 peer
      └── @pnp/odata 1.3.11 peer

It appears that this dependency is present twice in the three, but with multiple versions.

Steps to Reproduce

I pushed a repro repository with the minimal code to reproduce the issue : pnpcontrolsmix

In a command line, do:

git clone https://github.com/stevebeauge/pnpcontrolsmix.git
cd pnpcontrolsmix
pnpm i
pnpm run build

Clone the linked pnpcontrolsmix reproduction, install dependencies with pnpm, and run pnpm run build to reproduce the bundling failure. Start with the SPTaxonomyService.js import of @pnp/odata/parsers and compare the dependency versions shown by pnpm why @pnp/odata. Done means both @pnp/spfx-controls-react 3.13.0 and @pnp/spfx-property-controls 3.12.0 can be used together without the module-resolution error.