Customer experience | Sales, Customer Insights,...

PCF virtual control FluentUI TeachingBubble: Property 'children' does not exist on type 'IntrinsicAttributes & ITeachingBubbleProps'.

(0) Share

Report

Posted on by luisdev86

I am developing a PCF virtual control and using the `TeachingBubble` control but I'm getting an error while building the control.

Here's my code:

 setShowBubble(false)}
        >
          You can only select up to 10 services at once

and here's the error:

TS2322: Type '{ children: string; calloutProps: { directionalHint: 9; }; target: string; isWide: false; hasCloseButton: true; closeButtonAriaLabel: string; headline: string; onDismiss: () => void; }' is not assignable to type 'IntrinsicAttributes & ITeachingBubbleProps'.
Property 'children' does not exist on type 'IntrinsicAttributes & ITeachingBubbleProps'.

Now it appears the control won't accept the text inside the <TeachingBubble></TeachingBubble> tags but MS sample code on the API uses it, I've done some googling around but found nothing. Any help is greatly appreciated

All responses (13)

Answers (0)

luisdev86 16 on at

Like (0)

Report

RE: PCF virtual control FluentUI TeachingBubble: Property 'children' does not exist on type 'IntrinsicAttributes & ITeachingBubbleProps'.

Just for closure, I gave up in the end, used the PopUp control form fluentUI.

Thank you very much for all the help Andrew!
a33ik 84,323 Most Valuable Professional on at

Like (2)

Report

RE: PCF virtual control FluentUI TeachingBubble: Property 'children' does not exist on type 'IntrinsicAttributes & ITeachingBubbleProps'.

Ok. Then... I'm afraid I'm out of other options.
luisdev86 16 on at

Like (0)

Report

RE: PCF virtual control FluentUI TeachingBubble: Property 'children' does not exist on type 'IntrinsicAttributes & ITeachingBubbleProps'.

On my index.ts file:

export class MultiSelectComboBox implements ComponentFramework.ReactControl<IInputs, IOutputs>

my actual react component

export const WorkItemsMultiSelect: FunctionComponent<IWorkItemsControlInputs>

Thanks for the quick reply!!
a33ik 84,323 Most Valuable Professional on at

Like (1)

Report

RE: PCF virtual control FluentUI TeachingBubble: Property 'children' does not exist on type 'IntrinsicAttributes & ITeachingBubbleProps'.

What's the name of your PCF control from index.ts file?
luisdev86 16 on at

Like (0)

Report

RE: PCF virtual control FluentUI TeachingBubble: Property 'children' does not exist on type 'IntrinsicAttributes & ITeachingBubbleProps'.

I'm not understanding completely what you're saying or where to look, but, I did `Go to definitions` and VsCode took me to the import statement and arrived at:

it looks different from both of yours

so maybe I need to update my type definitions for fluentui?
a33ik 84,323 Most Valuable Professional on at

Like (1)

Report

RE: PCF virtual control FluentUI TeachingBubble: Property 'children' does not exist on type 'IntrinsicAttributes & ITeachingBubbleProps'.

No worries. I'm here to help if I could.

One thing that popped up in my mind -

what are names for PCF Control generated class and React Component you use? Are those the same or different? Here is what I have:

PCF Control:

React Component:
luisdev86 16 on at

Like (0)

Report

RE: PCF virtual control FluentUI TeachingBubble: Property 'children' does not exist on type 'IntrinsicAttributes & ITeachingBubbleProps'.

I haven't been able to find the issue yet, the only difference between your config and mine is that I'm using prettier for code formatting and don't think that's the issue, could it be related to the TS version we're using?

Thank you very much for all your help so far, I really appreciate it.
a33ik 84,323 Most Valuable Professional on at

Like (1)

Report

RE: PCF virtual control FluentUI TeachingBubble: Property 'children' does not exist on type 'IntrinsicAttributes & ITeachingBubbleProps'.

Here is mine (I don't think it's the reason though):

{

"env": {

"browser": true,

"es2021": true

},

"extends": [

"eslint:recommended",

"plugin:react/recommended"

],

"globals": {

"ComponentFramework": true

},

"parser": "@typescript-eslint/parser",

"parserOptions": {

"ecmaVersion": 12,

"sourceType": "module"

},

"plugins": [

"@microsoft/power-apps",

"@typescript-eslint"

],

"rules": {

"no-unused-vars": "off"

},

"settings": {

"react": {

"version": "detect"

}

}

}
luisdev86 16 on at

Like (0)

Report

RE: PCF virtual control FluentUI TeachingBubble: Property 'children' does not exist on type 'IntrinsicAttributes & ITeachingBubbleProps'.

Mine look just like that, as they come from the template, I think it might be a linting issue, here's my `.eslintrc.json` file content, can you please see if there are any differences with yours?

{
"env": {
    "browser": true,
    "es2021": true
},
"extends": ["eslint:recommended", "plugin:prettier/recommended", "plugin:react/recommended", "prettier"],
"globals": {
    "ComponentFramework": true
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module",
    "project": "./tsconfig.json"
},
"plugins": ["@microsoft/power-apps", "@typescript-eslint", "prettier"],
"rules": {
    "no-unused-vars": "off",
    "prettier/prettier": "warn"
},
"settings": {
    "react": {
      "version": "detect"
    }
}
}
Suggested answer

a33ik 84,323 Most Valuable Professional on at

Like (1)

Report

RE: PCF virtual control FluentUI TeachingBubble: Property 'children' does not exist on type 'IntrinsicAttributes & ITeachingBubbleProps'.

Here is what I have in ControlManifest:

<platform-library name="React" version="16.8.6" />

<platform-library name="Fluent" version="8.29.0" />

Here is what I have in package.json:

"dependencies": {

"react": "16.8.6",

"@fluentui/react": "8.29.0",

"react-dom": "16.8.6"

},