Typescript errors occur when I try to integrate React Framework based Target Audience functionality into SPFx solution having multiple SPFx Web Parts that have no Javascript Framework

Question

Hi,

I have created a SPFx solution & added multiple SPFx Web Parts having no Javascript Framework.

For implementing the Target Audience functionality, I have created a React Framework based SPFx Web Part in this SPFx solution & have integrated the changes from https://github.com/rabwill/generic-target-audience

However, I am getting compilation errors when I execute gulp build.

For example:

Error - typescript - node_modules/@types/prop-types/index.d.ts(52,53): error TS1005: ';' expected.

Error - typescript - node_modules/@types/prop-types/index.d.ts(52,56): error TS1109: Expression expected.

Error - typescript - src/webparts/sampleTargetedComponent/SampleTargetedComponentWebPart.ts(19,21): error TS2415: Class 'SampleTargetedComponentWebPart' incorrectly extends base class 'BaseClientSideWebPart<ISampleTargetedComponentWebPartProps>'.

Kindly let me know the solution for the above errors.

Thanks.

Answer 1

Hi anonymous user-9563,

I understand you want to add 'target-audience-generic-component' web part (React) to an existing web part solution (No JS Framework). Please take a reference of below demo:

• https://github.com/kongmengfei/SharedSPFx/blob/master/multipleWPsolu/src/webparts/sampleTargetedComponent/SampleTargetedComponentWebPart.ts

This demo contains a 'helloword' webpart (no framework) and 'SampleTargetedComponentWebPart'.

Test Result:

More reference:

• How to add new webpart to an existing spfx project

Best Regards,
Baker Kong