Script Error thrown with CDN & Webpack Externals

2 posts, 1 answers
  1. Nagarajan
    Nagarajan avatar
    13 posts
    Member since:
    Jun 2020

    Posted 22 Jun 2020 Link to this post

    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. 

     

  2. Answer
    Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 23 Jun 2020 Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top