Add KendoReact to Externals to reduce packaging

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

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

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

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.

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.

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