This is a migrated thread and some comments may be shown as answers.

Add KendoReact to Externals to reduce packaging

6 Answers 250 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ruud
Top achievements
Rank 1
Ruud asked on 04 Nov 2019, 01:32 PM

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

6 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 06 Nov 2019, 07:20 AM

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
0
Ruud
Top achievements
Rank 1
answered on 07 Nov 2019, 08:14 AM

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

0
Accepted
Stefan
Telerik team
answered on 07 Nov 2019, 02:21 PM

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
0
Ruud
Top achievements
Rank 1
answered on 08 Nov 2019, 02:59 PM

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.

0
Shankar
Top achievements
Rank 1
answered on 17 Jun 2020, 09:16 PM

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.

 

0
Stefan
Telerik team
answered on 18 Jun 2020, 10:17 AM

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.
Tags
General Discussions
Asked by
Ruud
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Ruud
Top achievements
Rank 1
Shankar
Top achievements
Rank 1
Share this question
or