Unable to use Kendo-react-grid with typescript

4 posts, 0 answers
  1. Abhay
    Abhay avatar
    5 posts
    Member since:
    Apr 2019

    Posted 07 Jan Link to this post

    Fails to compile on using the simplest of grid implementations as follows. (But the same works on a react JS implementation)
    The attached image has a screen shot of the implementation.
    Code is as follows for the react component.

    import { connect } from 'react-redux';
    import * as redux from 'redux';
    import * as projectActions from '../../redux/actions/projectActions';
    import * as authorActions from '../../redux/actions/authorActions';
    import * as React from 'react';
    import { bindActionCreators } from 'redux';
    import { Project } from '../../interfaces/Project';
    import { ApplicationState } from '../../redux/reducers/initialState';
    import { Grid } from '@Progress/kendo-react-grid';
     
    interface OwnProps {
     
    }
     
     
    type ReduxProps = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;
    // type Props = StateFromProps & DispatchFromProps & NavbarComponentProps;
    interface Pprops extends ReduxProps {
        handleDeleteProject1: (project: Project) => void
    }
     
    class ProjectsPage extends React.Component<Pprops, any> {
     
        state = {
            redirectToAddProjectPage: false
        };
     
        componentDidMount() {
        }
     
        handleDeleteProject1 = async (project: Project) => {
        }
     
        render() {
            return (
                <>
                    <Grid></Grid>
                </>
            );
        }
    }
     
    function mapStateToProps(
        state: ApplicationState
        , ownProps: OwnProps
    ) {
        const projectsList = state.projectsStateSlice.projects;
        return {
            projects:
                projectsList.map(project => {
                    const authorNamee = project.authorId.toString();
                    return {
                        ...project,
                        authorName: authorNamee
                    };
                }),
            authors: state.authorsStateSlice.authors,
            loading: 0
        };
    }
     
    function mapDispatchToProps(dispatch: redux.Dispatch) {
        return {
            actions: {
                loadProjects: bindActionCreators(projectActions.loadProjects, dispatch),
                loadAuthors: bindActionCreators(authorActions.loadAuthors, dispatch),
                deleteProject: bindActionCreators(projectActions.deleteProject, dispatch)
            }
        };
    }
     
    // prop types declarations
    export default connect(mapStateToProps, mapDispatchToProps)(ProjectsPage);

     

    Throws the following error:

    ./src/components/projects/ProjectsPage.tsx
    Cannot find file: 'main.js' does not match the corresponding name on disk: '.\node_modules\@Progress\kendo-react-grid\dist\es\@progress'.

    When I dig into the node modules' directory that its claiming to throw the error from,

    looks like this
    .\node_modules\@Progress\kendo-react-grid\dist\es\main.js

    it doesn't apparently contain any directory called @progress inside of the es (.\node_modules\@Progress\kendo-react-grid\dist\es\@progress)

    FYI: I also am a licensed developer. 

    Is this something to do with the licensing of the kendo UI by any chance?

    My package.json 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"
        ]
      }
    }

     

  2. Stefan
    Admin
    Stefan avatar
    2619 posts

    Posted 09 Jan Link to this post

    Hello, Abhay,

    I have replied to the same question asked in the private ticket.

    If you have further questions, please continue the discussion in a place of your choice forum/private ticket. We monitor both of them.

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

    Posted 13 Jan Link to this post

    Thank you, Stefan! I am in fact happy that the error was easily fixed by changing the case of a letter in the import statement.
    You know, how trivial a problem can start making us wear a magnifying glass and look soo big that we go tangent.
    All I would have asked for alongside your in-time support is that the errors spat out had some context to it, saying maybe, directly that the case is the problem or something around that.

    Otherwise, all I'd want to reply is, THANK YOU for giving me back my hours :)

     

    Abhay,

     

  4. Stefan
    Admin
    Stefan avatar
    2619 posts

    Posted 14 Jan Link to this post

    Hello, Abhay,

    I`m glad we were able to help.

    As for a message with more context - This is a message coming from the compiler as it is not fining a package. In this specific case, we have no control over the message, as our package was not added.

    We are adding different type messages and checking to our component via TypeScript to ensure that in most cases, the messages will be helpful.

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