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

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
0

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