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?
1 Answer, 1 is accepted
0
Accepted
Hello,
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:
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
Regards,
Vasil
Progress Telerik
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
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items