React - Cannot read property 'Editor' of undefined

2 posts, 0 answers
  1. guzman
    guzman avatar
    1 posts
    Member since:
    Oct 2014

    Posted 05 Jan Link to this post

    Hi there,

    I'm trying to run Kendo Editor on React using the sample that appears on NPM.

    I'm using webpack.

    This is my component:

    var KendoEditor = require('kendo-ui-react-jquery-editor').default;
      
    //Don't forget CSS, webpack used to include CSS
    require('../../../Content/Telerik/kendo.common.min.css');
    require('../../../Content/Telerik/kendo.default.min.css');
    require('../../../Scripts/Telerik/kendo.editor.js');
     
      
    var Example = React.createClass({
        render: function() {
            return (
              <KendoEditor options={{height: 550,sortable: true}}>
     
              </KendoEditor>
          );
    }
    });
     
    module.exports = Example;

    This is my view

    @Html.React("Client.Example", new { }, clientOnly: true)

     

    And I'm already bundling kendo.editor.js and kendo.all.js.

    The error that appears is:

    Uncaught TypeError: Cannot read property 'Editor' of undefined

    On this line:

    //note I am not using jQuery plugin to instantiate, don't want to wait for namespace on $.fn
        this.widgetInstance=new _kendoEditor2['default'].ui.Editor(elementNode,this.props.options);//if props are avaliable for events, triggers, unbind events, or methods make it happen now

     

    Can you please help? Thanks in advance.

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2509 posts

    Posted 06 Jan Link to this post

    Hello guzman,

    Please note that this project is a community effort and is not officially supported. The following reply is a general debugging advice, and any problems in the package should be addressed to the project maintainer.

    Since the error occurs on the line this.widgetInstance=new _kendoEditor2['default'].ui.Editor, it means that the .ui part is undefined. The line of code is found in the editor npm package. The imported part (_kendoEditor2['default']) is in this import, so it is likely that the npm plug-in cannot find the proper Kendo UI files.

    The files should not be required at the top level, like in the posted snippet:

    require('../../../Scripts/Telerik/kendo.editor.js');


    Rather, the npm package should load it itself.

    Regards,
    Alex Gyoshev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top