Type { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string | undefined; }>; } is not assignable to type ReactNode when working on the Build A Pluggable Widget Tutorial

4
Hello,    I started working on the tutorial for the https://academy.mendix.com/link/paths/142/Build-a-Pluggable-Widget and am currently running into an error after 3.2.1 Implementation step 3.    After updating the CharacterCounter.tsx, the content prop throws an error: Error: @rollup/plugin-typscript TS2322: Type '{ widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string | undefined; }>; }' is not assignable to type 'ReactNode'   Any suggestions on fix and if people are running into the same issue when doing the tutorial?    Thanks!    
asked
5 answers
6

I got the same error and saw that the interface CharacterCounterPreviewProps is deprecated (from ./typings/CharacterCounterProps.d.ts) and that the Hello World sample generated is using CharacterCounterContainerProps, so I made the same change as Nico. Just make sure to also change the type in the function too:

After that the build is working, not sure what is Nico’s error though, at that point refresh the App in StudioPro (F4) and move you input field inside your widget:

and you should be able to continue:

 

I hope it works for you too, but please don’t ask me why, I have never done any React code before so I just guessed and tried :-)

answered
4

I ran into the same issue. What I found was changing 

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

to 

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

in CharacterCounter.tsx allows me to build the widget but when trying to use the widget, I get this error

 

 

I’ve e-mailed the Academy for help and will update once I received a response/solution

answered
1

I’ve hit exactly the same issue with this learning path.

 

I was able to create the pluggable widget inside of the solution folder and hierarchy as suggested and got the widget to display ‘Hello World’ in the Person_NewEdit page.  

However, after making the suggested tsx and XML changes listed in the learning path in section 3.2.1 and then doing an ‘npm run build’ it results in a compilation failure of the widget. 

Like the previous posters have suggested, as this is a learning path I would have expected the path to result in a successful compilation after the suggested changes are made.

In case there’s a module conflict that is causing this, the npm module versions I have installed are as follows;

 

Local Modules

+-- @mendix/pluggable-widgets-tools@9.24.1
+-- @rollup/plugin-typescript@11.1.1
+-- @types/big.js@6.1.6
`-- classnames@2.3.2

 

Global Modules

+-- @mendix/generator-widget@9.24.2
`-- yo@4.3.1

 

Node/npm version

node  v18.16.0
npm   9.5.1

 

answered
0

I have the same issue. Following the tutorial leads me to this exact error.

answered
0

Same here, this learning path needs to be checked and made more clear!

 

answered