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 :-)
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
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
I have the same issue. Following the tutorial leads me to this exact error.
Same here, this learning path needs to be checked and made more clear!
The Attached screenshot will solve the issue.
Change
to
import { CharacterCounterPreviewProps } from "../typings/CharacterCounterProps";
to
import { CharacterCounterContainerProps } from "../typings/CharacterCounterProps";