[Extensibility + Web Parts] Building an extensibility library on SPFx 1.19.0 or 1.20.0 causes run-time errors in the Search Web Part's LayoutHelper function "getUsedSlotNames"

[tandrasi]

Version used
PnP Modern Search - Search Web Parts - v4.13.1.0
@pnp/modern-search-extensibility - v1.19.0 or v1.18.2 (read more below)
SPFx - v1.19.0 or v1.20.0

Describe the bug
We have a solution dedicated to various SPFx libraries, such as the Search Extensibility library. The entire solution is built on SPFx 1.18.2. We are doing a sweep to upgrade existing projects to 1.19.0/1.20.0 to future proof them. Existing internal frameworks and projects which rely on them have been upgraded successfully to ensure they work with Webpack 5 under SPFx 1.20.0.

However, attempting to upgrade our SPFx libraries solution to 1.19.0, without touching any other code, has led to a runtime (NOT build) error with the Search Web Parts. It fails at the getUsedSlotNames function in LayoutHelper.ts, specifically at line 276 as "templateContent" is being passed a "Module" object rather than a string, causing the "trim()" function to fail. This causes the custom templates to not load and the entire web part to break.

To Reproduce
Detailed steps to reproduce the behavior:

1. Set Search Results web part to use a custom search extensibility template built on SPFx 1.19.0 or 1.20.0 (read more in Additional Context);
2. Failure :(

Expected behavior
I expect this run-time issue not to occur, just like in 1.18.2.

Screenshots
Our "libraries" solution has 3 layouts which we have been maintaining and using without a hitch, all with very complex rendering baked in. All this is working in SPFx 1.18.2:

Upgrading to 1.19.0 leaves default templates working as getUsedSlotNames's "templateContent" parameter correctly gets passed as a string:

However, upgrading to 1.19.0 causes custom templates to fail as getUsedSlotNames's "templateContent" parameter incorrectly gets passed as an object (a "Module", to be exact) and therefore the code can't call "trim":

Desktop (please complete the following information):

• Browser: Chromium (Chrome, Edge - latest)

Additional context

Things I have tried:

1. fails Using SPFx 1.19.0 with @pnp/[email protected].
2. fails Using SPFx 1.20.0 with @pnp/[email protected] (with "any" casting to circumvent build errors).
3. fails Using SPFx 1.19.0 with @pnp/[email protected] (with "any" casting to circumvent build errors).
4. works Using SPFx 1.18.2 with @pnp/[email protected]

Theories:
I think this is due to SPFx 1.19.0+'s Webpack 5 builds. It has drastically changed how we need import packages and include pollyfills.

I created this original issue with SPFx 1.19.0 as our builds were failing but we didn't know why with [Object][object] errors:
SharePoint/sp-dev-docs#9675. This was closed in favour of a more descriptive issue: SharePoint/sp-dev-docs#9834.

The SPFx 1.20.0 release address these issues, with it being referenced directly in the changelog:

[wobba]

v4.13.1.0of the web parts should use use v1.18.2 of extensibility https://www.npmjs.com/package/@pnp/modern-search-extensibility/v/1.18.2. I had issues updating to SPFX v1.19/20 so will stay at 1.18.2 for the time being. Unfortunately loading of libs like this require all parts to be on the same SPFx version.