Kendo react and vs code

5 posts, 0 answers
  1. Ryan
    Ryan avatar
    61 posts
    Member since:
    Mar 2014

    Posted 07 Nov 2017 Link to this post

    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

  2. Ryan
    Ryan avatar
    61 posts
    Member since:
    Mar 2014

    Posted 08 Nov 2017 in reply to Ryan Link to this post

    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';
  3. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 09 Nov 2017 Link to this post

    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.
  4. Abhay
    Abhay avatar
    5 posts
    Member since:
    Apr 2019

    Posted 07 Jan 2020 Link to this post

    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"
        ]
      }
    }

  5. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 09 Jan 2020 Link to this post

    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.
Back to Top