Add KendoReact to Externals to reduce packaging

7 posts, 1 answers
  1. Ruud
    Ruud avatar
    63 posts
    Member since:
    Oct 2012

    Posted 04 Nov 2019 Link to this post

    Hi,

    I'm trying to figure out how to package my solution based on the "Create-React-App" template (TypeScript). I want to use the Externals node in the webpack configuration to ensure the KendoReact packages are excluded from the packaging procedures.

    I saw this article: https://www.telerik.com/kendo-react-ui/components/installation/scripts-only . However, this approach means i need to reference all controls via the Window object. I rather keep the code base as is, so using import statements like

    import { Grid, GridColumn as Column } from "@progress/kendo-react-grid

    and use the control in Jsx. Is this possible?

    Best regards,

    Ruud

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 06 Nov 2019 Link to this post

    Hello, Ruud,

    The KendoReact packages can be added to the externals collection using the approach described in the Webpack docs:

    https://webpack.js.org/configuration/externals/

    As for the scripts, there is a KendoReactAll script, that resolves the issue of loading each package as a separate script.

    If this does not help to resolve the issue, could you please provide more details, on what the current issue is and the ultimate end result.

    Regards,
    Stefan
    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
  3. Ruud
    Ruud avatar
    63 posts
    Member since:
    Oct 2012

    Posted 07 Nov 2019 in reply to Stefan Link to this post

    Hi Stefan,

    Thanks for your reply. My apologies; I had to provide with some more information. Project setup:

    • my project is created with Create-React-App --typescript
    • I use several KendoReact components, for example the Grid, by installing the grid component and adding an import statement in the component itself
    • when the project is build, i end up with a gzip size of appr. 700 kb, which in my case is 43% of the package size

    So, in order to get the size of the package down (and, I hope, faster build time), I'm trying to get the KendoReact packages out of my own package. Please bear with me, I'm not experienced in the (webpack) packaging, but I understand that you can use the node "Externals" in the webpack config to exclude node modules for being compiled as part of the project. In my case:
            "react": "React",
            "react-dom": "ReactDOM",
            "@progress/kendo-drawing": "kendo-drawing",
            "@progress/kendo-react-intl": "kendo-intl",
            "@progress/kendo-react-buttons":"kendo-react-buttons",
            "@progress/kendo-react-dateinputs":"kendo-react-dateinputs",
            "@progress/kendo-react-dropdowns":"kendo-react-dropdowns",
            "@progress/kendo-react-grid":"kendo-react-grid",
            "@progress/kendo-react-layout":"kendo-react-layout",
            "@progress/kendo-react-notification":"kendo-react-notification",
            "@progress/kendo-theme-bootstrap":"kendo-theme-bootstrap"

    This works. When building, these packages are kept out of the compiled output. Which reduces the size drastically (417.83 vs appr 700kb). Great!

    But now the step which is failing; referencing these components in my html output. I used the sample at link https://www.telerik.com/kendo-react-ui/components/installation/scripts-only/, so I added the following links:

            <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
            <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
            <script src="  https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js"></script>
            <script src="  https://unpkg.com/@progress/kendo-react-intl@latest/dist/cdn/js/kendo-react-intl.js"></script>
            <script src="https://unpkg.com/@progress/kendo-react-all@latest/dist/cdn/js/kendo-react-all.js"></script>
            <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css"></link>

    Unfortunately, this gives the following error when loading in the browser: 

    kendo-react-all.js:1 Uncaught TypeError: Cannot read property 'getDate' of undefined
        at K (kendo-react-all.js:1)
        at kendo-react-all.js:1
        at Module.<anonymous> (kendo-react-all.js:1)
        at n (kendo-react-all.js:1)
        at Object.<anonymous> (kendo-react-all.js:1)
        at n (kendo-react-all.js:1)
        at kendo-react-all.js:1
        at kendo-react-all.js:1
        at kendo-react-all.js:1
        at kendo-react-all.js:1

    So, basically, my question is, is this the correct approach (please bear in mind I use TypeScript) and if so, what are the script links to include?

    Thanks again!
    Ruud

  4. Answer
    Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 07 Nov 2019 Link to this post

    Hello, Ruud,

    Thank you for the details.

    Actually this is an issue with the CRA app bundling, as it should not include unused code with the Tree shaking functionality.

    You can follow this item:

    https://github.com/facebook/create-react-app/issues/6943

    Still, as this is still not implemented, the externals may prove helpful.

    .................................

    As for the JS error that occurs, this is actually an issue on our side from version 3.5.1 and the code is taking the latest 3.6.0.

    Please give it a try with specific version 3.4.0:

            <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
            <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
            <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
            <script src="  https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js"></script>
            <script src="  https://unpkg.com/@progress/kendo-react-intl@3.4.0/dist/cdn/js/kendo-react-intl.js"></script>
            <script src="https://unpkg.com/@progress/kendo-react-all@3.4.0/dist/cdn/js/kendo-react-all.js"></script>
            <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css"></link>
     

    Regards,
    Stefan
    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
  5. Ruud
    Ruud avatar
    63 posts
    Member since:
    Oct 2012

    Posted 08 Nov 2019 in reply to Stefan Link to this post

    Thanks for the info! For anyone interested; to be able to override certain parts of the webpack configuration in a create-react-app I use Rescripts cli (@rescripts/cli) to override certain parts of the webpack configuration in a create-react-app without having to eject.

  6. Shankar
    Shankar avatar
    1 posts
    Member since:
    Jun 2020

    Posted 17 Jun 2020 Link to this post

    Hi,

    I started learning webpack and react while working with externals in weback, I stumbled on issues.

    Below are my configurations,

    webpack.config.js

    output: {
            libraryTarget: "umd",
        },
        target: 'web',
        externals: {
            "react": "React",
            "react-dom": "ReactDOM",
            "@progress/kendo-drawing": "kendo-drawing",
            "@progress/kendo-react-intl": "kendo-intl",
            "@progress/kendo-react-buttons": "kendo-react-buttons",
        },

    App.tsx

    import React from 'react';
    import { Button } from '@progress/kendo-react-buttons';
    function App() {
        return (
            <React.Fragment>
                Testing
                <Button>Default</Button>
            </React.Fragment>
        );
    }
    export default App;

    index.html

    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css"></link>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>
        <script src="  https://unpkg.com/@progress/kendo-date-math@dev/dist/cdn/js/kendo-date-math.js"></script>
        <script src="  https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js"></script>
        <script src="  https://unpkg.com/@progress/kendo-react-intl@latest/dist/cdn/js/kendo-react-intl.js"></script>
        <!-- <script src="https://unpkg.com/@progress/kendo-react-all@latest/dist/cdn/js/kendo-react-all.js"></script> -->
        <script src="https://unpkg.com/@progress/kendo-react-buttons@3.14.0/dist/cdn/js/kendo-react-buttons.js"></script>

    I am getting the script error in the image. Please help me for this.

     

  7. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 18 Jun 2020 Link to this post

    Hello, Shankar,

    Thank you for the code.

    This seems to be connected to how the webpack externals are configured.

    I can suggest checking the following GitHub items as they seem connected to the same issue:

    https://github.com/webpack/webpack/issues/1701

    https://github.com/Semantic-Org/Semantic-UI-React/issues/1032

    If the issue still occurs, please share a fully runnable example and I will be happy to assist further.

    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