Kendo React Grid and WebPack 4 conflicts

[Yau]

Hi,

I trying to incorporate Kendo React Components with an existing React SPA.

 

Trying I can successfully add a grid to a page, here is a snippet of my Component:

import * as React from 'react';
import { Grid, GridColumn as Column, GridToolbar } from '@progress/kendo-react-grid';

export const icon: string = "fa fa-grid";
export const title: string = "Inline Grid";

interface IData {
    id: string;
    name: string;
    description: string;
}

interface IState {
    data: Array<IData>;
}

interface IProps {

};


export class InlineEditGrid extends React.Component<IProps, IState> {
    constructor(props: IProps) {
        super(props);

        this.state = {
            data: [
                {
                    id: "00001",
                    name: "Name",
                    description: "Testing 1, 2, 3",
                }
            ]
        }
    }

    public render() {

        return (
                <div className='row'>
                    <div className='col-xs-12'>
                        <Grid
                            data={this.state.data}>
                            <GridToolbar>
                                <button
                                    title="Save Changes"
                                    className="k-button">
                                    Save Changes
                                </button>
                                <button
                                    title="Cancel Changes"
                                    className="k-button">
                                    Cancel Changes
                                </button>
                            </GridToolbar>

                            <Column field="id" title="Id" width="50px" editable={false} />
                            <Column title="Product Name" width="150px" field="name" />
                            <Column title="Description" width="200px" field="description" />
                        </Grid>
                    </div>
                </div>
        );
    }
}

 

The problem is, I doesn't detect the GridToolbar or the GridColumns, so my GridToolbar is not visible and my columns aren't formatted as required.

Troubleshooting the problem I took a peek into my node_modules folder under @progress\kendo-react-grid\dist\es\Grid.js to see how the Grid component detects GridToolbars and GridColumns.  I found the following:

Grid.prototype.render = function () {
        ...
        var children = React.Children.toArray(this.props.children);
        this.initColumns(children.filter(function (child) { return child && child.type === GridColumn; }));
        var toolbar = children.filter(function (child) { return child && child.type === GridToolbar; });
        ...
}

 

As I am using Webpack to bundle my script files, including vendor imports, I has a look at the file Webpack generated script file to see how it was imported:

Grid.prototype.render = function () {
        ...
        this.initColumns(children.filter(function (child) { return child && child.type === _GridColumn__WEBPACK_IMPORTED_MODULE_3__["default"]; }));
        var toolbar = children.filter(function (child) { return child && child.type === _GridToolbar__WEBPACK_IMPORTED_MODULE_17__["default"]; });
        ...
}

 

As you can see Webpack has replaced the type references with it's own types, hence the conditional statements can never resolve to true.

What is the best wayto configure webpack so it can import Kendo React components with causing the above issues?

 

Thanks.

[Stefan]

Hello, Yau,

Thank you for the details.

This sounds like an issue that will occur if the React Hot Loader is used as it is wrapping the components and the type checking is lost.

If this is the case, the cold method of the React Hot Loader can be used in order to not modify the Kendo UI for React components:

http://kendoui-feedback.telerik.com/forums/908425-kendo-ui-for-react-feedback/suggestions/33997945-support-for-react-hot-loader

Regards,
Stefan
Progress Telerik

[Yau]

I've tried wrapping the GridToolbar and GridColumn with cold, but it appears there is no effect.

I've added:

import { cold } from 'react-hot-loader';

 

and wrapped GridToolbar and GridColumn:

cold(GridColumn);
cold(GridToolbar);

It appears webpack is still doing it's magic and wrapping the imported Components in some _SomeTypeHere_WEBPACK_IMPORTED_MODULE_N__["default"].

I've tried googling for help with webpack to work out how to switch this off, I was wondering if you can point me in some direction on how to correctly configure webpack for Kendo React components?

[Stefan]

Hello, Yau,

When the hot loader is used the entire Grid has to be passed to the cold function as well:

import { cold } from 'react-hot-loader';
import * as KendoGrid from '@progress/kendo-react-grid';

const Grid = cold(KendoGrid.Grid);
const Column = cold(KendoGrid.GridColumn);
const GridCell = KendoGrid.GridCell;

If this is still producing the same result, please share a runnable example, and I will be happy to inspect and modify the Webpack configuration.

Regards,
Stefan
Progress Telerik

[Yau]

Hi Stefan,

No difference I'm still experiencing the same issues.  I've created a demo on my personal GIT repo:

https://github.com/YauGoh/INX-React-Guide

This is a template using our Solution template for building .Dotnet Core SPA applications.  The file location of the page hosting the Grid can be found under: src/components/grid/InlineEditGrid.tsx

I would appreciate you experience here to help us out.

 

Thanks.

 

[Stefan]

Hello, Yau,

Thank you for the example.

After testing on my end as well, indeed the cold method is not preventing the wrapping of the component. This seems as an issue with the React Hot Loader as the cold method is not working as expected.

I can open an issue in their GitHub repository to check why the cold method is not preventing the desired wrapping of the components. I just want to ask if it is ok to use the project you provided in GitHub or would you prefer us making a new one?

Additionally, I can suggest checking this issue, as they are considering to stop supporting the react-hot-loader which can lead to many different issues in the future:

https://github.com/gaearon/react-hot-loader/issues/1024

Regards,
Stefan
Progress Telerik

[Yau]

Hi Stefan,

Yes it is fine to use this Repo.

Thanks

[Stefan]

Hello, Yau,

Thank you for that.

I opened an issue in the React Hot Loader repo.

I can suggest tracking it, as I hope that they will give us more details on why this is happening:

https://github.com/gaearon/react-hot-loader/issues/1048

If their report the issue is pointing again to the Kendo UI components, we will continue with the test on our end.

Apologies for the created inconvenience.

Regards,
Stefan
Progress Telerik