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

Kendo react and vs code

4 Answers 207 Views
Integration with other JS libraries
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 07 Nov 2017, 04:47 PM

Hello,

I'm unable to successfully follow the Getting Started with Kendo UI Wrappers for React guide. When I follow Microsoft's TypeScript-React-Starter guide using the standard create-react-app but with react-scripts-ts instead I receive typescript compiler errors from the kendo dependencies.

The first is the unused kendo module.

error TS6133: 'kendo' is declared but its value is never read.

 

If I add a workaround for that by adding an if (kendo) {} I get the following error

error TS2306: File 'node_modules/@progress/kendo-ui/index.d.ts' is not a module error

 

https://github.com/Microsoft/TypeScript-React-Starter

4 Answers, 1 is accepted

Sort by
0
Ryan
Top achievements
Rank 1
answered on 08 Nov 2017, 12:57 PM

FYI with guidance on the kendo getting started tutorial I had this line:

import * as kendo from '@progress/kendo-ui';

which produced an error. But after reviewing the react webinar it led me to this working import instead.

import '@progress/kendo-ui';
0
Stefan
Telerik team
answered on 09 Nov 2017, 08:20 AM
Hello, Ryan,

Indeed, the Kendo main library can be imported using different approaches.

It can also be required:

require("@progress/kendo-ui/js/kendo.all.js");

Or to be directly added as a standard script reference if an index.ejs or index.html is used.

We will update these options in the documentation, so issues like this one are easy to locate and fix.

I also, updated your Telerik points for bringing this to our attention.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Abhay
Top achievements
Rank 1
answered on 07 Jan 2020, 09:16 PM

I am unable to use kendo react grid component in my typescript based react project.

Simplest of implementation throws the same error persistantly.
Says: ./src/components/about/AboutPage.tsx
Cannot find file: 'main.js' does not match the corresponding name on disk: '.\node_modules\@Progress\kendo-react-grid\dist\es\@progress'.

 

 

 

All I tried doing is this based on an example from here:
https://stackblitz.com/run/?file=app%2Fmain.jsx

T

import React from "react";<br>import { Grid, GridColumn as Column } from '@Progress/kendo-react-grid';<br>import products from '../../../tools/products.json';<br><br>const AboutPage = () => {<br>    const localGridState = {<br>        data: [<br>            { field1: 'a', field2: 'b' },<br>            { field1: 'c', field2: 'd' }<br>        ]<br>    }<br>    return (<br>        <div><br>            <h2>About</h2><br>            <p><br>                This app uses React, Redux, React Router, and many other helpful<br>                libraries.<br>        </p><br><br>            <Grid data={localGridState.data}></Grid><br>        </div><br>    );<br>}<br>export default AboutPage;

But the same implementation works well on a react JS implementation. 
Please do suggest any changes to resolve this error. 
Should we even consider going away from kendo UI libraries for react.
The package.json file is as follows:

{
  "name": "cncy-react-redux",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start:dev": "react-scripts start",
    "prestart:api": "node tools/createMockDb.js",
    "start:api": "node tools/apiServer.js",
    "test": "jest",
    "start": "run-p start:api start:dev"
  },
  "jest": {
    "setupFiles": [
      "./tools/testSetup.js"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|mp3|wav|m4a|aac|oga)$": "<rootDir>/tools/fileMock.js",
      "\\.(css|less)$": "<rootDir>/tools/styleMock.js"
    }
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.26",
    "@fortawesome/free-regular-svg-icons": "^5.12.0",
    "@fortawesome/free-solid-svg-icons": "^5.12.0",
    "@fortawesome/react-fontawesome": "^0.1.8",
    "@reduxjs/toolkit": "^1.2.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/bootstrap": "^4.3.1",
    "@types/enzyme": "^3.10.4",
    "@types/jest": "^24.0.24",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.5",
    "@types/react-router-dom": "^5.1.3",
    "@types/react-toastify": "^4.1.0",
    "@types/redux": "^3.6.0",
    "@types/redux-immutable-state-invariant": "^2.1.1",
    "@types/redux-thunk": "^2.1.0",
    "@types/reselect": "^2.2.0",
    "bootstrap": "^4.4.1",
    "immer": "2.1.3",
    "node-sass": "^4.13.0",
    "prop-types": "15.7.2",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-dom": "^16.12.0",
    "react-redux": "^7.1.3",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "react-toastify": "^5.4.1",
    "redux": "^4.0.4",
    "redux-immutable-state-invariant": "^2.1.0",
    "redux-thunk": "^2.3.0",
    "reselect": "^4.0.0",
    "typescript": "~3.7.2",
    "@progress/kendo-data-query": "1.5.2",
    "@progress/kendo-date-math": "1.5.1",
    "@progress/kendo-drawing": "1.6.0",
    "@progress/kendo-react-animation": "3.9.0",
    "@progress/kendo-react-buttons": "3.9.0",
    "@progress/kendo-react-data-tools": "^3.9.0",
    "@progress/kendo-react-dateinputs": "3.9.0",
    "@progress/kendo-react-dialogs": "3.9.0",
    "@progress/kendo-react-dropdowns": "3.9.0",
    "@progress/kendo-react-excel-export": "3.9.0",
    "@progress/kendo-react-grid": "3.9.0",
    "@progress/kendo-react-inputs": "3.9.0",
    "@progress/kendo-react-intl": "3.9.0",
    "@progress/kendo-react-layout": "3.9.0",
    "@progress/kendo-react-pdf": "3.9.0",
    "@progress/kendo-react-popup": "3.9.0",
    "react-transition-group": "4.3.0"
  },
  "devDependencies": {
    "enzyme": "^3.9.0",
    "enzyme-adapter-react-16": "1.11.2",
    "fetch-mock": "^8.1.0",
    "jest": "^24.9.0",
    "json-server": "0.14.2",
    "node-fetch": "^2.3.0",
    "npm-run-all": "4.1.5",
    "react-test-renderer": "16.8.4",
    "react-testing-library": "^6.1.2",
    "redux-immutable-state-invariant": "2.1.0",
    "redux-mock-store": "^1.5.3",
    "rimraf": "2.6.3",
    "style-loader": "0.23.1"
  },
  "eslintConfig": {
    "extends": "react-app",
    "settings": {
      "react": {
        "version": "detect"
      }
    },
    "root": true
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

0
Stefan
Telerik team
answered on 09 Jan 2020, 10:52 AM

Hello, Abhay,

I have answered in the separate post in the forum for the same issue:

https://www.telerik.com/forums/unable-to-use-kendo-react-grid-with-typescript

Regards,
Stefan
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Integration with other JS libraries
Asked by
Ryan
Top achievements
Rank 1
Answers by
Ryan
Top achievements
Rank 1
Stefan
Telerik team
Abhay
Top achievements
Rank 1
Share this question
or