Importing "PropertyPaneTextField" from the recommended package breaks my "Teams Tab" project and causes manifest-related errors

Serban 21 Reputation points
2021-03-16T16:14:51.807+00:00

I took on an existing Teams Tab w. SPFx project and I had to add some features.
Among those features: customizable property

I added the needed imports, and then I was warned that some of them are deprecated, and tried to use them from the recommended package. But this change broke my project completely and caused some errror in the Teams client.

This is my code before switching to the recommended package for import: 78372-01ok.jpg

This is the code after using the recommended package: 78318-02broken.jpg

The Teams error: 78334-03teamserror.jpg

And my imports in the "package.json" file:

"dependencies": {
"@microsoft/sp-core-library": "1.8.2",
"@microsoft/sp-lodash-subset": "1.8.2",
"@microsoft/sp-office-ui-fabric-core": "^1.8.2",
"@microsoft/sp-property-pane": "1.8.2",
"@microsoft/sp-webpart-base": "1.8.2",
"@pnp/spfx-controls-react": "1.13.2",
"@types/es6-promise": "0.0.33",
"@types/react": "16.7.22",
"@types/react-dom": "16.8.0",
"@types/webpack-env": "1.13.1",
"@uifabric/file-type-icons": "^7.0.4",
"office-ui-fabric-react": "6.143.0",
"react": "^16.7.0",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "16.7.0"
},
"resolutions": {
"@types/react": "16.7.22"
},
"devDependencies": {
"@microsoft/rush-stack-compiler-2.9": "0.7.7",
"@microsoft/sp-build-web": "1.8.2",
"@microsoft/sp-module-interfaces": "1.8.2",
"@microsoft/sp-tslint-rules": "1.8.2",
"@microsoft/sp-webpart-workbench": "1.8.2",
"@types/chai": "3.4.34",
"@types/mocha": "2.2.38",
"ajv": "~5.2.2",
"gulp": "^3.9.1",
"gulp-zip": "^5.0.0",
"gulp-sequence": "1.0.0",
"semver": "^6.2.0"
}
}

Can anybody help me understand what I did wrong ?
What's the correct fix for this situation ?

Thank you.

Microsoft Teams Development
Microsoft Teams Development
Microsoft Teams: A Microsoft customizable chat-based workspace.Development: The process of researching, productizing, and refining new or existing technologies.
3,056 questions
{count} votes