Creating A Pluggable Widget: Error In TypeScript

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
2 answers
2

Hi,

 

Use

 import { CharacterCounterContainerProps } from "../typings/CharacterCounterProps";

 

instead of `CharacterCounterPreviewProps` as it is deprecated.

 

So your CharacterCounter.tsx should look like this:

answered
0

Great answer.  Mendix must have noticed at some point and updated the copy/paste code section to this:

import { CharacterCounterContainerProps } from "../typings/CharacterCounterProps"; import "./ui/CharacterCounter.css"; export function CharacterCounter({ content }: CharacterCounterPreviewProps): ReactElement { const [currentInput, setCurrentInput] = useState<string>("");

Which is even worse, as it mixes the non-preview and preview props, so errors out with another message...

 

As above, remove the "Preview" bit from the CharacterCounterPreviewProps...

answered