React.js：ReferenceError：剑道未定义

Question

I am using kendo-ui in my react project. Code for importing and using the Menu component is as below:

import React from 'react';
import { Menu, MenuItem } from '@progress/kendo-layout-react-wrapper';

const AppHeader = () => {
    return (
        <Menu>
            <MenuItem>
                Test Item
            </MenuItem>
        </Menu>
    )
}

export default AppHeader; 

It compiles fine, but throws the following error while rendering:

ReferenceError: kendo is not defined
Menu../node_modules/@progress/kendo-layout-react-wrapper/dist/es/menu/menu.js.Menu.componentDidMount
E:/projects/eucerin/node_modules/@progress/kendo-layout-react-wrapper/dist/es/menu/menu.js:31
  28 | Menu.prototype.componentDidMount = function () {
  29 |     var domNode = ReactDOM.findDOMNode(this);
  30 |     var _a = this.props, children = _a.children, widgetRef = _a.widgetRef, props = __rest(_a, ["children", "widgetRef"]);
> 31 |     this.widgetInstance = new kendo.ui.Menu(domNode, props);
  32 |     _super.prototype.componentDidMount.call(this);
  33 | };
  34 | Menu.prototype.componentWillReceiveProps = function (nextProps) {

I think I am missing a dependency here. Could anyone please let me know?

Thanks

Answer 1

I had a similar problem and asked the questions React Kendo UI TreeView throws 'kendo is not defined'

I found the solution from the KendoUI plunker example TreeView Example

The Kendo UI instruction is:

Dependencies
The TreeView package requires you to install the following peer dependencies in your application:

• @progress/kendo-ui

We have to install it but that's not enough. What KendoUI team did is import @progress/kendo-ui in the code explicitly:

import kendo from '@progress/kendo-ui';

Hope it helps.

Answer 2

I had the same problem. For some reason, I had to import kendo this way :

import from '@progress/kendo-ui';

Hope it helps.

Answer 3

From the source , you also need 1 base dependency to use kendo-layout-react-wrapper :

@progress/kendo-base-component-react-wrapper

To install and save as dependency, use:

npm install --save @progress/kendo-base-component-react-wrapper

Answer 4

I think you're missing the peer dependency (@progress/kendo-ui) .

Type npm install --save @progress/kendo-ui in your project folder and compile your frontend again to see if it fixes the error.

Documentation Source