React项目使用Kendo UI组件时出现ReferenceError: kendo未定义

Hey, let's sort out that kendo is not defined error you're seeing when rendering the Kendo UI Menu component in your React project. This is a super common gotcha with Kendo's React wrapper libraries—here's why it's happening and how to fix it:

Why the Error Happens #

The @progress/kendo-layout-react-wrapper package is a wrapper around the original Kendo UI jQuery-based components, not a pure React implementation. That means it depends on two critical global resources being available in your app:

1. jQuery (Kendo UI's core dependency)
2. The Kendo UI core library itself

Right now, your project is missing these global imports, so the wrapper can't find the kendo object it needs to render the Menu.

Step-by-Step Fix #

1. Install Missing Dependencies #

First, make sure you have all required packages installed. Run this in your project root:

npm install jquery @progress/kendo-ui @progress/kendo-layout-react-wrapper

2. Add Global Imports to Your App Entry #

Open your project's entry file (usually src/index.js or src/main.jsx) and add these imports before any component that uses Kendo UI:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 1. Import jQuery and attach it to the global window object
import $ from 'jquery';
window.$ = $;
window.jQuery = $;

// 2. Import Kendo UI core library
import '@progress/kendo-ui';

// 3. Import Kendo UI styles (pick the theme you need)
import '@progress/kendo-ui/css/web/kendo.common.min.css';
import '@progress/kendo-ui/css/web/kendo.default.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

3. Verify Your Component Code #

Your existing AppHeader component code is fine—once the global resources are loaded, it should render without errors:

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;

Quick Notes #

• If you're using a custom Webpack config, you could also configure ProvidePlugin to auto-inject jQuery globally instead of attaching it to window manually—but the above method works for most React setups (including Create React App).
• Make sure you're importing the correct Kendo theme styles for your project (replace kendo.default.min.css with another theme if needed, like kendo.material.min.css).

内容的提问来源于stack exchange，提问作者Ashy Ashcsi