FilePicker panel causes SharePoint to Throttle due to infinite loop fetching files

[zshane-repoint]

Category

[ ] Enhancement

[X ] Bug

[ ] Question

Version

"@pnp/spfx-controls-react": "3.10.0"
AND/OR (i've tried both)
"@pnp/spfx-controls-react": "^3.10.0-beta.3137331"

using SPFx v1.13.1

package.json

"dependencies": {
    "@fluentui/react": "^8.88.0",
    "@fluentui/react-file-type-icons": "^8.7.2",
    "@fluentui/react-hooks": "^8.2.6",
    "@microsoft/decorators": "1.13.0",
    "@microsoft/generator-sharepoint": "1.13.1",
    "@microsoft/rush-stack-compiler-4.5": "^0.2.2",
    "@microsoft/sp-core-library": "1.13.0",
    "@microsoft/sp-dialog": "1.13.0",
    "@microsoft/sp-listview-extensibility": "1.13.0",
    "@microsoft/sp-lodash-subset": "1.13.0",
    "@microsoft/sp-office-ui-fabric-core": "1.13.0",
    "@microsoft/sp-property-pane": "1.13.0",
    "@microsoft/sp-webpart-base": "1.13.0",
    "@pnp/core": "^3.6.0",
    "@pnp/logging": "^3.6.0",
    "@pnp/queryable": "^3.6.0",
    "@pnp/sp": "^3.6.0",
    "@pnp/spfx-controls-react": "^3.10.0-beta.3137331",
    "gulp-sequence": "^1.0.0",
    "lodash": "^4.17.21",
    "office-ui-fabric-react": "7.174.1",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  },
  "devDependencies": {
    "@types/react": "16.9.51",
    "@types/react-dom": "16.9.8",
    "@microsoft/sp-build-web": "1.13.0",
    "@microsoft/sp-tslint-rules": "1.13.0",
    "@microsoft/sp-module-interfaces": "1.13.0",
    "@microsoft/rush-stack-compiler-3.9": "0.4.47",
    "@types/chai": "3.4.34",
    "@types/es6-promise": "0.0.33",
    "@types/mocha": "2.2.38",
    "@types/webpack-env": "1.13.1",
    "ajv": "~5.2.2",
    "gulp": "~4.0.2"
  }

Please specify what version of the library you are using: [3.10.0-beta.3137331]

Expected / Desired Behavior / Question

FilePicker panel to retrieve site documents from selected library using WebPartContext which extends BaseComponentContext.

Observed Behavior

FilePicker panel retrieves site documents from selected library in an infinite loop and crashes sharepoint tenant with a Throttle Limit error. It also throws the error below unless I cast the context as "any" which the documentation only mentions is needed for v1.12 of SPFx.

Type 'WebPartContext' is missing the following properties from type 'BaseComponentContext': _isServedFromLocalhost, isServedFromLocalhost

Steps to Reproduce

Use specified packages above. Create SPFx webpart and render the file picker by itself.

  public render(): void {

    const element: React.ReactElement<IFilePickerProps> = React.createElement(
      FilePicker,
      {
        buttonLabel: "Add glossary",
        buttonIcon: "CircleAdditionSolid",
        context: this.context as any,
        onSave: ()=>{
          alert("Saved")
        }
      }
    )

    ReactDom.render(element, this.domElement);
  }

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[PeterWCox]

I have exactly the same as OP - see minimum reproducible repo here https://github.com/PeterWCox/BrokenFilePicker.

Whenever I select a file, it is immediately unselected and the network tab goes ham with requests eventually resulting in an 'out of memory' exception.

Node 14.18.3 LTS
SPFX v1.15.2
"@pnp/spfx-controls-react": "^3.11.0",

However I believe it is package-independent as 3.9 3.10 and 3.11 don't work.

[VictorRomanov1986]

Hello @zshane-repoint @PeterWCox
I have pushed the PR to fix this issue. Hope it will be released soon

[zshane-repoint]

@VRomanovTau great thanks! I ended up downgrading my pnp version to v2 and everything is working fine now. Luckily I didn't have any dependencies on v3 so it was an easy transition.