Getting Script Error while using Kendo with SystemJS

[Nagarajan]

I have the following script error while rendering Kendo react component with SyestemJS. I have attached the script error image below.

 

system.config.js

// map tells the System loader where to look for things
    map: {
      'react': 'https://unpkg.com/react@16/umd/react.production.min.js',
      'react-dom': 'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
      'prop-types': 'https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js',
      '@progress/kendo-date-math': 'https://unpkg.com/@progress/kendo-date-math@dev/dist/cdn/js/kendo-date-math.js',
      '@progress/kendo-drawing': 'https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js',
      '@progress/kendo-react-intl': 'https://unpkg.com/@progress/kendo-react-intl@latest/dist/cdn/js/kendo-react-intl.js',
      '@progress/kendo-react-buttons': 'https://unpkg.com/@progress/kendo-react-buttons@3.14.0/dist/cdn/js/kendo-react-buttons.js'
    }

I have also attached a sample for your reference. Please help me react component using CDN links and SystemJS. Without kendo components, this project works fine. 

 

 

[Nagarajan]

I am aware of the below method to load Kendo components using Script only.

https://www.telerik.com/kendo-react-ui/components/installation/scripts-only/

But, the code in tsx file should contain as we use it from node_modules. Please help me.

[Nagarajan]

I have checked this in another way but that is also not working. 

system.config.js

System.config({
    transpiler: "ts",
    typescriptOptions: {
        target: "es5",
        module: "commonjs",
        moduleResolution: "node",
        emitDecoratorMetadata: true,
        experimentalDecorators: true,
        "jsx": "react"
    },
    meta: {
        'typescript': {
            "exports": "ts"
        }
    },
    map: {
        app: 'app',
        ts: "https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js",
        typescript: "https://unpkg.com/typescript@3.9.5/lib/typescript.js",
        "react-dom": "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js",
        "react": "https://unpkg.com/react@16/umd/react.production.min.js",
        'prop-types': 'https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js',
        '@progress/kendo-date-math': 'https://unpkg.com/@progress/kendo-date-math@latest/dist/cdn/js/kendo-date-math.js',
        '@progress/kendo-drawing': 'https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js',
        'react-transition-group': 'https://www.unpkg.com/react-transition-group@latest/dist/react-transition-group.js',
        '@progress/kendo-react-intl': 'https://unpkg.com/@progress/kendo-react-intl@latest/dist/cdn/js/kendo-react-intl.js',
        '@progress/kendo-react-buttons': 'https://unpkg.com/@progress/kendo-react-buttons@latest/dist/cdn/js/kendo-react-buttons.js'
    },
    packages: {
        'app': { main: 'index', defaultExtension: 'tsx' }
    }
});
System.import('app');

[Kiril]

Hello Nagarajan,

I was able to replicate the described problem on my side.

The issue seems to be related to a missing entry in the System.config.map collection in the `system.config.js` file. After adding the missing `react-dom/server` entry, the problem seems to be resolved:

System.config({
    transpiler: "ts",
    typescriptOptions: {
        target: "es5",
        module: "commonjs",
        moduleResolution: "node",
        emitDecoratorMetadata: true,
        experimentalDecorators: true,
        "jsx": "react"
    },
    meta: {
        'typescript': {
            "exports": "ts"
        }
    },
    map: {
        app: 'app',
        ts: "https://unpkg.com/plugin-typescript@8.0.0/lib/plugin.js",
        typescript: "https://unpkg.com/typescript@3.9.5/lib/typescript.js",
        "react-dom": "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js",
        // Add the following:
        "react-dom/server": "https://unpkg.com/react-dom@16/umd/react-dom.production.min.js",
        "react": "https://unpkg.com/react@16/umd/react.production.min.js",
        'prop-types': 'https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js',
        '@progress/kendo-date-math': 'https://unpkg.com/@progress/kendo-date-math@latest/dist/cdn/js/kendo-date-math.js',
        '@progress/kendo-drawing': 'https://unpkg.com/@progress/kendo-drawing@latest/dist/cdn/js/kendo-drawing.js',
        'react-transition-group': 'https://www.unpkg.com/react-transition-group@latest/dist/react-transition-group.js',
        '@progress/kendo-react-intl': 'https://unpkg.com/@progress/kendo-react-intl@latest/dist/cdn/js/kendo-react-intl.js',
        '@progress/kendo-react-buttons': 'https://unpkg.com/@progress/kendo-react-buttons@latest/dist/cdn/js/kendo-react-buttons.js'
    },
    packages: {
        'app': { main: 'index', defaultExtension: 'tsx' }
    }

});

System.import('app');

Please let me know the issue is still present on your side, or if you need further assistance.

Regards,
Kiril
Progress Telerik

[Nagarajan]

Do you have any working sample for latest version of SystemJS using the below link

https://unpkg.com/@progress/kendo-react-buttons@3.14.0/dist/systemjs/kendo-react-buttons.js

The above sample is with older version of SystemJS. I have searched your documentation but not able to find the details for using new version of SystemJS. 

A working sample is appreciated. 

[Kiril]

Hi Nagarajan,

The Systemjs library have dropped many of it's features in its latest major version. This being said, i am not able to replicate the same behavior with the latest version of Systemjs, as additional transpilation of the code should be done prior to consuming it.

In case you find this interesting, our website examples are also using the older (0.21.5) version of Systemjs, due to the removed features of the new (6.3.2) version.

Please let me know if you need further assistance, and i will be happy to help!

Regards,
Kiril
Progress Telerik

[Nagarajan]

Thank a lot for your response. 

I just saw the System.register method in the above mentioned CDN so I thought that Telerik will support latest version of SystemJS. My first code example updated is using compiled code. Can you please check on this.

"scripts": {
    "build": "tsc --noImplicitAny --strictNullChecks --jsx react -p ./",
    "build:watch": "tsc --noImplicitAny --strictNullChecks --jsx react -p ./ -w"
  },

<html>
    <head>
        <title>SystemJs/React Hello World</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="./node_modules/systemjs/dist/system.src.js"></script>
        <script src="./systemjs.config.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css"></link>
        <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    </head>
    <body>
        <div id="main_react_container"></div>
        <script>
            System.import('./Main.js').catch(function (err) {
                console.error(err);
            });
        </script>
    </body>
</html>

[Kiril]

Hi Nagarajan,

Thank you for clarifying your use case. I missed the part where you used a build-script to compile the code from typescript to javascript.

I was able to extend the provided project to use the newest Systemjs version together with typescript compilation.
Please find it attached.

The key part is to load all of the necessary extras of Systemjs, and provide the correct typescript configuration.

After a successful `npm install` and `npm run build` commands you should be able to open the `index.html`, but please let me know if you are having any issues.

As always, please let me know if you need further assistance.

Regards,
Kiril
Progress Telerik

[Aryan]

Hi,

What is the script for "@progress/kendo-data-query"?

Regards,

Aryan

[Aryan]

Found it.