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

I have the same question (0)

All responses (13)

Answers (0)

Suggested answer

a33ik 84,331 Most Valuable Professional on at

Like (1)

Report
Hello,

I composed a quick proto and everything worked fine for me from the first attempt. Here is the code of my component:

import { DefaultButton, DirectionalHint, IButtonProps, TeachingBubble } from '@fluentui/react'; import { useBoolean, useId } from '@fluentui/react-hooks'; import * as React from 'react'; export const TeachingBubbleControl: React.FunctionComponent = () => { const buttonId = useId('targetButton'); const [showBubble, setShowBubble] = React.useState(false) return (
{setShowBubble(true)}} text={showBubble ? 'Hide TeachingBubble' : 'Show TeachingBubble'} /> {showBubble && ( setShowBubble(false)} headline="Discover what’s trending around you" > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, nulla, ipsum? Molestiae quis aliquam magni harum non? )}
); }

Was this reply helpful? Yes No
luisdev86 1 on at

Like (0)

Report

That looks exactly like what I'm doing, what React and FluentUI versions are you using?

Was this reply helpful? Yes No
Suggested answer

a33ik 84,331 Most Valuable Professional on at

Like (1)

Report

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"

},

Was this reply helpful? Yes No
Suggested answer

a33ik 84,331 Most Valuable Professional on at

Like (1)

Report

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"

},

Was this reply helpful? Yes No
luisdev86 1 on at

Like (0)

Report

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"
    }
}
}

Was this reply helpful? Yes No
a33ik 84,331 Most Valuable Professional on at

Like (1)

Report

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"

}

}

}

Was this reply helpful? Yes No
luisdev86 1 on at

Like (0)

Report

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.

Was this reply helpful? Yes No
a33ik 84,331 Most Valuable Professional on at

Like (1)

Report

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:

Was this reply helpful? Yes No
luisdev86 1 on at

Like (0)

Report

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?

Was this reply helpful? Yes No
a33ik 84,331 Most Valuable Professional on at

Like (1)

Report

What's the name of your PCF control from index.ts file?

Was this reply helpful? Yes No