Unable to use Kendo-react-grid with typescript

[Abhay]

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

 

[Stefan]

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

[Abhay]

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,

 

[Stefan]

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