Advanced extensibility documentation should be more detailled

[stevebeauge]

Hello,

I'm experimenting extending the search results with adding custom web components.

I first try to follow the documentation, but I faced multiple challenges before reaching the hello world state (a button in a search result).

Here's the issues I faced:

SPFX, PnP Search component and @pnp/modern-search-extensibility dependency must be perfectly aligned.

The document mention that SPFX version in the projet must match pnp search component ones.

Suggestion:

• add in the documentation page the SPFX version used in the latest pnp search release, or, ideally, a table which list which PNP search release introduced which version of SPFX

React is not included in the library project by default

Suggestion: mention explicitly this step in the process (adding react@17.0.1, react-dom@17.0.1 and their @types/ couterpart).

Project does not bundle without a bunch of SPFX dependencies

After implementing the very first hello world component, the gulp bundle operation fails with the

horrible webpack error:

Maybe this error won't appear with npm thanks to phantom dependencies, but with more robust package managers like pnpm, it will.

To fix the issue, I've added these dependencies manually:

"@microsoft/sp-page-context": "1.18.2",
"@microsoft/sp-http": "1.18.2",
"@microsoft/sp-adaptive-card-extension-base": "1.18.2",
"@microsoft/sp-component-base": "1.18.2",
"@microsoft/sp-core-library": "1.18.2",
"@microsoft/sp-lodash-subset": "1.18.2",
"@microsoft/sp-property-pane": "1.18.2",
"@microsoft/sp-webpart-base": "1.18.2",

Suggestions:

• add a paragraph in the documentation to explain this prerequisites.
• add these dependencies as peer dependencies of @pnp/modern-search-extensibility in order to warn the user of missing dependencies.

A custom template may make things easier

The setup process need several required steps. Maybe a custom boilerplate template would help bootstrapping faster new projects.

---

Thanks