Material-table: React.Node issue

[nourhankh]

I am working on a React website using type script and faced this issue. I have talked to you on twitter few minutes ago.

/ClientApp/node_modules/material-table/types/index.d.ts
TypeScript error in /ClientApp/node_modules/material-table/types/index.d.ts(171,59):
Namespace 'React' has no exported member 'Node'. TS2694

[gjgd]

Same error here

[Domino987]

Can yo share some of your code and what you are doing?

[nourhankh]

Can yo share some of your code and what you are doing?

I am using it to update translation according to keywords, but those are dummy data and I cant process further more because of the error above.

import * as React from 'react';
import { Spin, Icon } from 'antd';
import { connect } from 'react-redux';
import { push } from "connected-react-router";
import { IUserData, IClientPermissionSP } from '../../redux/constants';
import { TabBar } from '../../components/ReusableComponents/Bars/Bars';
import 'antd/dist/antd.css';
import { Row, Col, Label, Navbar, Button, FormGroup, Input } from "reactstrap";
import MaterialTable, { Column } from 'material-table';


declare var require: any
const $ = require("jquery");
const retreat = require("../../Assets/imgs/retreat.png") as string;

export interface IndexProps {
    push: any;
    theme: any;
    lang: string;
    userData: IUserData;
    clientPermissionSP: IClientPermissionSP;
    URL: string;
    ActionURL: string;
    location: any;
}

export interface IndexStates {
    isLoading: boolean;
}
const mapStateToProps = (state: any) => ({
    userData: state.auth,
    clientPermissionSP: state.auth.ClientPermissionSP,
    GlobalUser: state.auth.GlobalUser,
    lang: state.language.value,
    state: state.sidebar,
    layout: state.layout,
    history: state.history,
    theme: state.theme,
    location: state.router.location,
    URL: state.auth.GlobalUser.yoonitGetURL,
    ActionURL: state.auth.GlobalUser.yoonitActionsURL,
});

const dispatchProps = { push }
const antIcon = <Icon type="loading" style={{ fontSize: 100 }} spin />;
class EachTranslation extends React.Component<IndexProps> {
    state = {
        isLoading: false

    }
    componentDidMount() {

    }
    showFilterBar = () => {

    }
    navigateToTranslations = () => {
        this.props.push('/Translations');
    }
    render() {
        var ref = this;
        return (
            <div className="insideMain">
                <Spin spinning={this.state.isLoading} size="large" className="spinIndicator" indicator={antIcon} />
                <div className={this.state.isLoading ? "blurBackground " : ""}>
                    <TabBar tabTitle={"Each Translation"} />
                    <Navbar expand className="borderbottom h40 bordertop pl0">
                        <Button className="tabTitle tabButton" onClick={this.navigateToTranslations}>
                            <img alt="" src={retreat} className="hoverIcon backiconGet" /> <span className="LabelCreate2"> Back to Translations --</span>
                        </Button>
                    </Navbar>
                    <div className="m10">
                        <EditableTable />
                    </div>
                </div>
            </div>

        );
    }
}


interface RowTable {
    english: string;
    chinese: string;
    date: number;
}

interface TableState {
    columns: Array<Column<RowTable>>;
    data: RowTable[];
}
export default connect(mapStateToProps, dispatchProps)(EachTranslation);
export function EditableTable() {
    const [state, setState] = React.useState<TableState>({
        columns: [
            { title: 'English', field: 'english', editable: 'never' },
            { title: 'Chinese', field: 'chinese' },
            { title: 'Creation Date', field: 'date', type: 'date', editable: 'never' },

        ],
        data: [
            { english: 'Are you sure you want to exclude this account and close his trades', chinese: '1234', date: 1987 },
            { english: 'Are you sure you want to freeze this account', chinese: '1234', date: 1987 },
            { english: 'Are you sure you want to include this account', chinese: '1234', date: 1987 },
        ],
    });

    return (
        <MaterialTable
            title=""
            columns={state.columns}
            data={state.data}
            editable={{
                onRowAdd: (newData) =>
                    new Promise((resolve) => {
                        setTimeout(() => {
                            resolve();
                            setState((prevState) => {
                                const data = [...prevState.data];
                                data.push(newData);
                                return { ...prevState, data };
                            });
                        }, 600);
                    }),
                onRowUpdate: (newData, oldData) =>
                    new Promise((resolve) => {
                        setTimeout(() => {
                            resolve();
                            if (oldData) {
                                setState((prevState) => {
                                    const data = [...prevState.data];
                                    data[data.indexOf(oldData)] = newData;
                                    return { ...prevState, data };
                                });
                            }
                        }, 600);
                    }),
            }}
            options={{
                actionsColumnIndex: -1,
            }}
        />
    );
}

[Domino987]

Ok that's a lot of code. Can you extract the necessary code that will trigger this error. E.g. adding options.actionsColumnIndex causes this or whatever causes this in your case? Because this is too broad to evaluate. What is your system setup? Are you using SSR?

[gjgd]

Here is a minimal reproduction of this issue:

https://github.com/gjgd/material-table-type-error

As a temporary fix, i added "skipLibCheck": true in tsconfig.json

[developerdu]

created https://github.com/mbrn/material-table/pull/2176 to address this issue

In the meantime, React.node can be changed to React.ReactNode to fix the import issue.

[nourhankh]

are we still waiting the code reviewer approval?