0

Hi there, I’m busy with the Pluggable Widget learning path, and is currently stuck here: Mendix Academy - 3.2.1 Implementation at point 3. My Type script looks as follows (note that my widget is call CharacterCounterTwo instead of the CharacterCounter as per the learning path): import { ReactElement, createElement, Fragment } from "react"; import { CharacterCounterTwoPreviewProps } from "../typings/CharacterCounterTwoProps"; import "./ui/CharacterCounterTwo.css"; export function CharacterCounter({ content }: CharacterCounterTwoPreviewProps): ReactElement { return ( <Fragment> <div>{ content }</div> </Fragment> ); }   In Visual Studio I get an error over ‘content’ in line 8 with the following message: Type '{ widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string | undefined; }>; }' is not assignable to type 'ReactNode'.ts(2322) index.d.ts(1414, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' (parameter) content: { widgetCount: number; renderer: React.ComponentType<{ children: React.ReactNode; caption?: string | undefined; }>; }   When I try to do the npm run build command I get the following error: [!] (plugin typescript) Error: @rollup/plugin-typescript TS2322: Type '{ widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string | undefined; }>; }' is not assignable to type 'ReactNode'. src/CharacterCounterTwo.tsx (8:18) 8 <div>{content}</div> ~~~~~~~~~ node_modules/@types/react/ts5.0/index.d.ts:1383:9 1383 children?: ReactNode | undefined; ~~~~~~~~ The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' Error: @rollup/plugin-typescript TS2322: Type '{ widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string | undefined; }>; }' is not assignable to type 'ReactNode'. at error ({Path}\node_modules\rollup\dist\shared\rollup.js:198:30) at throwPluginError ({Path}\node_modules\rollup\dist\shared\rollup.js:21718:12) at Object.error ({Path}\node_modules\rollup\dist\shared\rollup.js:22672:20) at emitDiagnostic ({Path}\node_modules\@rollup\plugin-typescript\dist\index.js:540:17) at reportDiagnostics ({Path}\node_modules\@rollup\plugin-typescript\dist\index.js:548:9) at Array.forEach (<anonymous>) at emitFilesAndReportErrors ({Path}\node_modules\typescript\lib\typescript.js:126138:21) at Object.result.afterProgramCreate ({Path}\node_modules\typescript\lib\typescript.js:126329:13) at Object.afterProgramCreate ({Path}\node_modules\@rollup\plugin-typescript\dist\index.js:703:29) at synchronizeProgram ({Path}\node_modules\typescript\lib\typescript.js:126639:22)   What am I missing and how do I resolve it?

asked 2023-06-13

1 answers