My first pluggable widget TextBox breaks as soon as I add <systemProperty key=Label />

0
Hi, I am following https://docs.mendix.com/howto/extensibility/create-a-pluggable-widget-one and as soon as I add <systemProperty key="Label" /> to the widget xml the properties “class” and “style” disappear from the generated interface “TextBoxContainerProps” and in Textbox.tsx and TextInput.tsx I see the error: "Type 'Element' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'."   I have followed the instructions from "create-a-pluggable-widget-one" and removed the lines style={props.style} and className={props.class} from TextBox.tsx, so the export function in Textbox.tsx looks like:   export function TextBox(props: TextBoxContainerProps): ReactElement {     const value = props.textAttribute.value || "";     return return <TextInput value={value} tabIndex={props.tabIndex} />; }   How can I fix this?   
asked
2 answers
2

Hi Giel

 

This seems like a TypeScript issue, because if you run npm run build in the terminal your widget will be built successfully.

I have created many Mendix widgets before and I have never experienced this problem. So I created a new widget and followed the same instructions you followed and I got the same issue you got too. I compared this new widget(exactly like the one you created) with my other widgets I've created before and I've noticed that the only major difference was @mendix/pluggable-widgets-tools dev dependency. In my other widgets yo generator used version 9.0.0 whilst the new one uses version 10.7.1.

 

To solve this issue I simply downgraded @mendix/pluggable-widgets-tools to 9.0.0.

I think this is a bug on the @mendix/pluggable-widgets-tools package. I have reported this issue to Mendix so that the developers are aware of it too.

 

As a workaround for now, go to your package.json file, then change the following:

From This

image.png

 

To This

image.png

 

After changing this line, you can run npm install in your terminal again.

answered
0

Hi Giel

 

Can you share what your xml file looks like?

answered