PnP controls throwing error in SPFx webpart created using Teams Toolkit.

[manuhinCCS]

I am getting below error while adding PnP Dragdrop control in the Teams toolkit SPFx webpart.

Is PnP controls supports SPFx web parts solutions created using Teams Toolkit?

Category

[ ] Bug

[ ] Question

Code:
import { DragDropFiles } from "@pnp/spfx-controls-react/lib/DragDropFiles";

private _getDropFiles = (files: any[]) => {
for (var i = 0; i < files.length; i++) {
console.log("Filename: " + files[i].name);
console.log("Path: " + files[i].fullPath);
}
}

{"Upload document..."}

{/* Specify the components to load where Drag and drop area should work */}

Version

Please specify what version of the library you are using: [ "@pnp/spfx-controls-react": "3.17.0" ]
node: v14.20.0
gulp CLI version: 2.3.0
microsoft/generator-sharepoint: 1.18.1

Thanks!

[ghost]

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

[michaelmaillot]

Hi @manuhinCCS,

From what I know, Teams Toolkit is creating a SPFx project with a specific version, nothing different than what you could create on your side with the original SPFx scaffolding.

However, the PnP Controls version 3.17.0 relies on SPFx version 1.18.2. You should update the PnP Control to the version of SPFx you're using.

Did you have the chance to update the Controls?