search

microsoft-search / pnp-modern-search

Home of PnP Modern Search solutions, helping you move from classic to modern SharePoint and beyond
https://microsoft-search.github.io/pnp-modern-search
Other
388 stars 341 forks source link

[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" #4034

Closed tandrasi closed 1 month ago

tandrasi commented 1 month ago

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: image

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

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": image

image

image

Desktop (please complete the following information):

Additional context

Things I have tried:

  1. fails Using SPFx 1.19.0 with @pnp/modern-search-extensibility@1.19.0.
  2. fails Using SPFx 1.20.0 with @pnp/modern-search-extensibility@1.19.0 (with "any" casting to circumvent build errors).
  3. fails Using SPFx 1.19.0 with @pnp/modern-search-extensibility@1.18.2 (with "any" casting to circumvent build errors).
  4. works Using SPFx 1.18.2 with @pnp/modern-search-extensibility@1.18.2

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: https://github.com/SharePoint/sp-dev-docs/issues/9675. This was closed in favour of a more descriptive issue: https://github.com/SharePoint/sp-dev-docs/issues/9834.

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

image

wobba commented 1 month ago

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.