Copied from https://stackoverflow.com/q/55593449/1399272
I am trying to develop with Kendo React in a .NET Web Forms application. It looks like Kendo distributes their packages as a variety of JavaScript modules -- the dist folder in their node packages contains the following four subfolders:
- cdn/js
- es
- npm
- systemjs
I'm sure this is relatively painless to work with in some of the newer JavaScript systems, but I do not have access to utilities such as node.js to manage modules. I am trying to simply include a JavaScript file with a script tag, but so far have not had much luck. I get the following errors when trying to include @progress/kendo-react-common:
- cdn/js: Uncaught TypeError: Cannot read property 'string' of undefined
- es: Uncaught SyntaxError: Unexpected token { (not like I expect a raw browser to understand import anyway)
- npm: Uncaught ReferenceError: exports is not defined
- systemjs: Uncaught ReferenceError: System is not defined
It looks like @TylerDahle has done something similar here: https://stackoverflow.com/q/49740869/1399272. But I don't know where he gets his source from.
Is there any way to include a Kendo React script with a script tag?
2 Answers, 1 is accepted
The correct files in this case are the JS in the CDN folders. The 'string' is undefined error comes from missing 'prop-types'.
Let me put here some runnable html page of the Calendar that just loads the required scripts.
https://jsbin.com/sicaquqofi/3/edit?html,output
Here is the code:
<!DOCTYPE html><html><head> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <link rel="stylesheet" href="https://www.unpkg.com/@progress/kendo-theme-material@latest/dist/all.css"> <script type="text/javascript" src="https://www.unpkg.com/prop-types@15.7.2/prop-types.min.js"></script> <script type="text/javascript" src="https://www.unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script> <script type="text/javascript" src="https://www.unpkg.com/@progress/kendo-react-dateinputs/dist/cdn/js/kendo-react-dateinputs.js"></script> <script type="text/javascript" src="https://www.unpkg.com/react-transition-group@2.5.3/dist/react-transition-group.js"></script> <script type="text/javascript" src="https://www.unpkg.com/react-dom@16.8.2/umd/react-dom-server.browser.production.min.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> ReactDOM.render( <div> <KendoReactDateinputs.Calendar /> </div>, document.getElementById('root') ); </script> </body></html>We ship kendo-react-all package. That includes all other packages. https://unpkg.com/@progress/kendo-react-all@2.8.0/dist/cdn/js/kendo-react-all.js But in this case you will need to add additional scripts for the kendo-data-query and kendo-drawing. Because they are required by the pdf/excel export, that are included into the all package.
Here is an example with kendo-react-all cdn script loaded.
https://jsbin.com/cetejepamu/1/edit?html,output
<!DOCTYPE html><html><head> <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://www.unpkg.com/react-dom@16.8.2/umd/react-dom-server.browser.production.min.js"></script> <script src="https://www.unpkg.com/react-transition-group@2.5.3/dist/react-transition-group.js"></script> <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> <script src="https://www.unpkg.com/prop-types@15.7.2/prop-types.min.js"></script> <link rel="stylesheet" href="https://www.unpkg.com/@progress/kendo-theme-material@latest/dist/all.css"> <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@progress/kendo-drawing@1.5.10/dist/cdn/js/kendo-drawing.js"> </script> <script src="https://www.unpkg.com/@progress/kendo-react-intl/dist/cdn/js/kendo-react-intl.js"></script> <script src="https://www.unpkg.com/@progress/kendo-react-all/dist/cdn/js/kendo-react-all.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> ReactDOM.render( <div> <KendoReactAll.Grid data = {[{a:'1' , b:2},{a:'3' , b:4}]} /> <br /> <KendoReactAll.Calendar /> </div>, document.getElementById('root') ); </script> </body></html>Regards,
Vasil
Progress Telerik
Rank 2
Iron
Iron
Iron
- Include Kendo UI Scripts: Kendo React components require the Kendo UI JavaScript and CSS files. You can link to these files directly from the Kendo CDN in your HTML file.
Add the following lines to the <head> section of your HTML to include Kendo React styles and scripts:
<!-- Kendo UI Styles -->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/5.5.0/styles/kendo.default-v2.min.css" />
<!-- Kendo UI Scripts -->
<script src="https://kendo.cdn.telerik.com/5.5.0/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/5.5.0/js/kendo.all.min.js"></script>
- Install React and Kendo React: If you're using React, you'll also need to install React and ReactDOM. This is typically done via npm, but you can also include the CDN for React if you're not using a bundler like Webpack
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
- Create Your React Component: You can now create a React component using Kendo React components. Here is an example of how to create a simple Kendo Button:
<div id="root"></div>
<script type="text/javascript">
const { Button } = window.KendoReact.Buttons;
function App() {
return (
<Button primary={true}>Click Me!</Button>
);
}
ReactDOM.render(<App />, document.getElementById('root'));
</script>
Test Your Setup: Make sure your Kendo React components are rendering correctly in the browser. You should see a button with the label "Click Me!" as shown in the example above.