Broken dependency : @nuvemerudita/react-controls

[stevebeauge]

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.

[stevebeauge]

Digging further, your own package relies on phantom dependencies.

Example:

• https://github.com/pnp/sp-dev-fx-controls-react/blob/master/src/controls/calendar/Toolbar.tsx imports @fluentui/react-tooltip which is NOT in the dependencies

[stevebeauge]

Workaround found, add this to the pnpm-workspace.yaml file:

packageExtensions:
    "@nuvemerudita/react-controls":
        peerDependencies:
            "@fluentui/react-button" : ">=9.0.0"
            "@fluentui/react-icons": ">=2.0.0"
            "@fluentui/react-icons-mdl2": ">=1.0.0"
            "@fluentui/react-tooltip": ">=9.0.0"
            uuid: ">=8.0.0"
    "@pnp/spfx-controls-react":
        peerDependencies:
            "@fluentui/react-button" : ">=9.0.0"
            "@fluentui/react-tooltip": ">=9.0.0"
            uuid: ">=8.0.0"
    "@pnp/spfx-property-controls":
        peerDependencies:
            "lodash" : ">=4"

This will fix the missing package.json dependencies.

[stevebeauge]

Running npx depcheck shows the full list of missing dependencies:

Missing dependencies

• enzyme-adapter-react-16: .\tests\controls\listItemAttachments\ListItemAttachments.test.tsx
• ControlsTestWebPartStrings: .\src\webparts\controlsTest\ControlsTestWebPart.ts
• TestApplicationCustomizerStrings: .\src\extensions\testApp\TestApplicationCustomizer.ts
• ControlStrings: .\src\extensions\ootbFields\OotbFieldsFieldCustomizer.ts
• uuid: .\scripts\execute-translation.js
• @microsoft/gulp-core-build: .\config\karma.config.js

You may consider adding depcheck in the CI checks?
Regarding @nuvemerudita/react-controls, I didn't find any repo where to submit issue. I think @joaojmendes is the author of the lib, but nothing visible in his profile.
I believe this package should be either opened to contribution or removed from this package.