Script Error thrown with CDN & Webpack Externals

[Nagarajan]

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. 

 

[Stefan]

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