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

Getting Script Error while using Kendo with SystemJS

9 Answers 34 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Nagarajan
Top achievements
Rank 1
Veteran
Nagarajan asked on 22 Jun 2020, 08:42 PM

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. 

 

 

9 Answers, 1 is accepted

Sort by
0
Nagarajan
Top achievements
Rank 1
Veteran
answered on 22 Jun 2020, 08:49 PM

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.

0
Nagarajan
Top achievements
Rank 1
Veteran
answered on 23 Jun 2020, 04:59 PM

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');

0
Accepted
Kiril
Telerik team
answered on 24 Jun 2020, 06:31 AM

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

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.
0
Nagarajan
Top achievements
Rank 1
Veteran
answered on 24 Jun 2020, 10:12 AM

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. 

0
Kiril
Telerik team
answered on 25 Jun 2020, 06:30 AM

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

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.
0
Nagarajan
Top achievements
Rank 1
Veteran
answered on 25 Jun 2020, 06:34 PM

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>

0
Kiril
Telerik team
answered on 26 Jun 2020, 08:25 AM

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

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.
0
Aryan
Top achievements
Rank 1
answered on 12 Jan 2021, 07:11 AM

Hi,

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

Regards,

Aryan

0
Aryan
Top achievements
Rank 1
answered on 13 Jan 2021, 05:35 AM
Found it.
Tags
General Discussions
Asked by
Nagarajan
Top achievements
Rank 1
Veteran
Answers by
Nagarajan
Top achievements
Rank 1
Veteran
Kiril
Telerik team
Aryan
Top achievements
Rank 1
Share this question
or