I decide to use webpack external to dynamically load the scipt files using CDN links. But, I am getting the below script error.
react-dom.production.min.js:125 TypeError: Cannot read property 'Button' of undefined
at c (main.js:1)
at we (react-dom.production.min.js:84)
at zj (react-dom.production.min.js:226)
at Th (react-dom.production.min.js:152)
at tj (react-dom.production.min.js:152)
at Te (react-dom.production.min.js:146)
at Ja (react-dom.production.min.js:224)
at md (react-dom.production.min.js:173)
at react-dom.production.min.js:175
at Rh (react-dom.production.min.js:147)
Me @ react-dom.production.min.js:125
react-dom.production.min.js:161 Uncaught TypeError: Cannot read property 'Button' of undefined
at c (main.js:1)
at we (react-dom.production.min.js:84)
at zj (react-dom.production.min.js:226)
at Th (react-dom.production.min.js:152)
at tj (react-dom.production.min.js:152)
at Te (react-dom.production.min.js:146)
at Ja (react-dom.production.min.js:224)
at md (react-dom.production.min.js:173)
at react-dom.production.min.js:175
at Rh (react-dom.production.min.js:147)
I know that Kendo React components could loaded only with script files but I want maintain the TypeScript standard. So, it is not possible.
I have attached the simple example application. Please help me to clear this. I have gone through multiple resource but not able to get it worked with Kendo component. Without Kendo there is no issue.
1 Answer, 1 is accepted
Hello, Nagarajan,
Thank you for the code.
After more detailed research I found where the issue comes from.
It requires a specific naming in the externals:
externals: {
"react": "React",
"react-dom": "ReactDOM",
"@progress/kendo-drawing": "kendo-drawing",
"@progress/kendo-react-intl": "kendo-intl",
"@progress/kendo-react-buttons": "KendoReactButtons", // the naming convention is KendoReactPackagename
},This occurs as there is a function that searches by this name inside the window object and this is how we name the object there.
The naming can be seen in our using with scripts article:
https://www.telerik.com/kendo-react-ui/components/installation/scripts-only/
const Calendar = window.KendoReactAll.Calendar // KendoReactAll as we use the all package.After I made the change the button was rendered as expected.
I hope this is helpful.
Regards,
Stefan
Progress Telerik
Our thoughts here at Progress are with those affected by the outbreak.