Broken dependency : @nuvemerudita/react-controls

Thank you for reporting an issue, suggesting an enhancement, or asking a question. We appreciate your feedback - to help the team understand your
needs please complete the below template to ensure we have the details to help. Thanks!

Please check out the documentation to see if your question is already addressed there. This will help us ensure our documentation is up to date.

Category

[ ] Enhancement

[X] Bug

[ ] Question

Version

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

Expected / Desired Behavior / Question

Should compile with any package manager.

Observed Behavior

A project which uses "@pnp/spfx-controls-react" can't compile if package manager isn't npm.

Steps to Reproduce

Create a new webpart project.

Ensure pnpm is used (remove package-lock.json and run pnpm install).

Add @pnp/spfx-controls-react as dependency.

Try to build.

It emits errors similar to:

[16:50:03] Finished subtask 'configure-webpack' after 585 ms
[16:50:03] Starting subtask 'webpack'...
[16:50:22] Error - [webpack] 'dist':
../../node_modules/.pnpm/@nuvemerudita+react-controls@1.0.0_scheduler@0.25.0/node_modules/@nuvemerudita/react-controls/dist/react-controls.esm.js:9:0-478: Module not found: Error: Can't resolve '@fluentui/react-icons' in 'c:\path\to\node_modules\.pnpm\@nuvemerudita+react-controls@1.0.0_scheduler@0.25.0\node_modules\@nuvemerudita\react-controls\dist'
../../node_modules/.pnpm/@nuvemerudita+react-controls@1.0.0_scheduler@0.25.0/node_modules/@nuvemerudita/react-cont

This is failing because the package @nuvemerudita/react-controls uses dependencies that are not declared in its package.json file.

This is working with npm, because npm uses a flat node_modules while other managers (pnpm in my case) are more stricts.

This is what Microsoft well documented as phantom dependencies.

Side note: you should consider moving out from npm, because npm is not able to detect such cases. At least, using other package managers (pnpm, yarn) should be included in your tests.

Start by inspecting the dependency declarations for @nuvemerudita/react-controls and reproduce the build with pnpm install in a new SPFx webpart. Compare the package's declared dependencies with the missing @fluentui/react-icons resolution; done means the project builds successfully with a non-npm package manager without relying on phantom dependencies.