Error TS2304: Cannot find name ReactNode. when trying to follow https://docs.mendix.com/howto/extensibility/create-a-pluggable-widget-one

0
Friday afternoon, so I am trying some new stuff in Mendix Modeler 8.0, aka Mendix Studio Pro: “https://docs.mendix.com/howto/extensibility/create-a-pluggable-widget-one” This works fine upto step 3 “npm run dev“of 3.3 Adding the Attribute. This results in not only the expected Error but more errorlines. Went on to step 4 and 5 and after saving any change the widget gets rebuilt and is showing these errormessages:   [16:37:46] Finished 'bundle' after 2.12 s [16:37:46] Starting 'createMpkFile'... [16:37:46] Finished 'createMpkFile' after 19 ms [16:37:46] Starting 'copyToDeployment'... Files generated in dist and G:/Documents/MendixProjects/MyDemoVersion8-main/ folder [16:37:46] Finished 'copyToDeployment' after 12 ms [16:37:46] Starting 'clean'... [16:37:46] Finished 'clean' after 6.77 ms [16:37:46] Starting 'generateTypings'... [16:37:46] Finished 'generateTypings' after 18 ms [16:37:46] Starting 'checkDependencies'... [16:37:46] Finished 'checkDependencies' after 4.95 ms [16:37:46] Starting 'bundle'... Webpack output: Hash: 40a59d570b9a49ff511e1e69cc988a14b240fbdf Version: webpack 4.30.0 Child Hash: 40a59d570b9a49ff511e Time: 1381ms Built at: 2019-05-03 16:37:48 Asset Size Chunks Chunk Names widgets/TextBox.xml 901 bytes [emitted] widgets/package.xml 386 bytes [emitted] widgets/tieka/textbox/TextBox.js 31.3 KiB main [emitted] main Entrypoint main = widgets/tieka/textbox/TextBox.js Child Hash: 1e69cc988a14b240fbdf Time: 1314ms Built at: 2019-05-03 16:37:48 Asset Size Chunks Chunk Names widgets/TextBox.webmodeler.js 4.99 KiB main [emitted] main Entrypoint main = widgets/TextBox.webmodeler.js ERROR in G:/Documents/MendixProjects/MyDemoVersion8-main/CustomWidgets/TextBox/src/TextBox.webmodeler.tsx Module build failed (from G:/Documents/MendixProjects/MyDemoVersion8-main/CustomWidgets/TextBox/node_modules/ts-loader/index.js): Error: TypeScript emitted no output for G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\src\TextBox.webmodeler.tsx. at makeSourceMapAndFinish (G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\node_modules\ts-loader\dist\index.js:78:15) at successLoader (G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\node_modules\ts-loader\dist\index.js:68:9) at Object.loader (G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\node_modules\ts-loader\dist\index.js:22:12) ERROR in G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\src\TextBox.tsx [tsl] ERROR in G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\src\TextBox.tsx(8,15) TS2304: Cannot find name 'ReactNode'. ERROR in G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\src\TextBox.webmodeler.tsx G:/Documents/MendixProjects/MyDemoVersion8-main/CustomWidgets/TextBox/src/TextBox.webmodeler.tsx [tsl] ERROR in G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\src\TextBox.webmodeler.tsx(1,10) TS2305: Module '"../../../../../../Documents/MendixProjects/MyDemoVersion8-main/CustomWidgets/TextBox/node_modules/@types/react"' has no exported member 'React'. ERROR in G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\src\TextBox.webmodeler.tsx G:/Documents/MendixProjects/MyDemoVersion8-main/CustomWidgets/TextBox/src/TextBox.webmodeler.tsx [tsl] ERROR in G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\src\TextBox.webmodeler.tsx(1,10) TS6133: 'React' is declared but its value is never read. ERROR in G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\src\TextBox.webmodeler.tsx G:/Documents/MendixProjects/MyDemoVersion8-main/CustomWidgets/TextBox/src/TextBox.webmodeler.tsx [tsl] ERROR in G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\src\TextBox.webmodeler.tsx(7,40) TS2304: Cannot find name 'TextBoxWebModelerProps'. ERROR in G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\src\TextBox.webmodeler.tsx G:/Documents/MendixProjects/MyDemoVersion8-main/CustomWidgets/TextBox/src/TextBox.webmodeler.tsx [tsl] ERROR in G:\Documents\MendixProjects\MyDemoVersion8-main\CustomWidgets\TextBox\src\TextBox.webmodeler.tsx(9,17) TS2304: Cannot find name 'TextInput'. [16:37:48] Finished 'bundle' after 1.41 s [16:37:48] Starting 'createMpkFile'... [16:37:48] Finished 'createMpkFile' after 13 ms [16:37:48] Starting 'copyToDeployment'... Files generated in dist and G:/Documents/MendixProjects/MyDemoVersion8-main/ folder [16:37:48] Finished 'copyToDeployment' after 12 ms This is probably easy to solve if I have done what the advise: “ Be sure all the imports are included before moving on from this step. ” But how to do that? How can I be sure all the imports are included?    
asked
1 answers
1

Hi Tim, thanks to use our "How-to" documentation and give us your feedback.

 

We identified that some things described in the documentation are a bit outdated compared to our new generator. We have changed the documentation because of your valuable feedback and we'll publish these changes soon. In the meantime, you can use these changes to finish the how-to:

Item 3.3

- Step 5

Add ReactNode to the "react" imports

import { Component, ReactNode, createElement } from "react";


- Step 6
Replace
 

declare function require(name: string): string;

// tslint:disable-next-line class-name
export class preview extends Component<TextBoxWebModelerProps> {
    render(): JSX.Element {
        return <TextInput value={this.props.textAttribute} />;
    }
}

with

import { TextInput } from "./components/TextInput";

declare function require(name: string): string;

// eslint-disable-next-line @typescript-eslint/class-name-casing
export class preview extends Component<TextBoxPreviewProps> {
   render(): JSX.Element {
       return <TextInput value={this.props.textAttribute} />;
   }
}

 

Item 3.5
Step 1:
Add

<systemProperty key="Label" />

inside <propertyGroup>

**Important, if your IDE is complaining about classNames, just replace this import:

import * as classNames from "classNames";

with

import classNames from "classNames";

 

answered