Kendo React Grid and WebPack 4 conflicts

8 posts, 0 answers
  1. Yau
    Yau avatar
    4 posts
    Member since:
    Aug 2018

    Posted 09 Aug 2018 Link to this post

    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.

  2. Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 09 Aug 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Yau
    Yau avatar
    4 posts
    Member since:
    Aug 2018

    Posted 09 Aug 2018 in reply to Stefan Link to this post

    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?

  4. Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 10 Aug 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Yau
    Yau avatar
    4 posts
    Member since:
    Aug 2018

    Posted 14 Aug 2018 in reply to Stefan Link to this post

    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.

     

  6. Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 14 Aug 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Yau
    Yau avatar
    4 posts
    Member since:
    Aug 2018

    Posted 14 Aug 2018 in reply to Stefan Link to this post

    Hi Stefan,

    Yes it is fine to use this Repo.

    Thanks

  8. Stefan
    Admin
    Stefan avatar
    2894 posts

    Posted 15 Aug 2018 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top