This is a migrated thread and some comments may be shown as answers.

React - Cannot read property 'Editor' of undefined

1 Answer 175 Views
Editor
This is a migrated thread and some comments may be shown as answers.
guzman
Top achievements
Rank 1
guzman asked on 05 Jan 2017, 03:01 PM

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.

1 Answer, 1 is accepted

Sort by
0
Alex Gyoshev
Telerik team
answered on 06 Jan 2017, 08:56 AM

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.
Tags
Editor
Asked by
guzman
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
Share this question
or