TaxonomyFields in SPFx - reactjs

Question

Currently I'm creating a new form in SPFx. When reading the fields of the list there is an taxonomyField.
I'm using the PnP Taxonomy control to display the taxonomy labels.
I would like to get the termset id from the taxonomy field and using the following code
var taxField = field as SP.Taxonomy.TaxonomyField;
ctx.load(taxField);
await new Promise((resolveTax, rejectTax) => {
ctx.executeQueryAsync(()=> {
let termSetID = taxField.get_termSetId();
console.log(termSetID);
resolveTax();
}, (sender,args) =>{
console.log("Could not retrieve taxonomyfield termsset id: " + args.get_message());
rejectTax();
});
});
}
I Always receive the following error:
TypeError: Cannot read property 'TaxonomyField' of undefined
at eval (eval at Type.parse (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:10143), :1:13)
at Function.Type.parse (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:10143)
at SP.ClientRequest.$3K_0 (https://...sharepoint.com/_layouts/15/SP.Runtime.js:2:51794)
at Array. (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:307)
at https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:51370
at Sys.Net.WebRequest.completed (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:89652)
at XMLHttpRequest._onReadyStateChange (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:84251)
Anybody a suggestion to fix this?

Answer 1

I suggest to use open source tools to work with SharePoint's Taxonomy, for example react-taxonomypicker
This is an elegant Taxonomy Picker control built with TypeScript for React. Initially built for use in Office 365 / SharePoint.
Features:
Retrieve Terms from a Term Set by Term Set GUID.
Support for large Term Set using Async mode
Use SP.Taxonomy.js
Use Promise (polyfill it if needed IE)
You can test it here: https://jquintozamora.github.io/react-taxonomypicker/