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

Unable to use Kendo-react-grid with typescript

3 Answers 223 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Abhay
Top achievements
Rank 1
Abhay asked on 07 Jan 2020, 10:27 PM

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

 

3 Answers, 1 is accepted

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

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
0
Abhay
Top achievements
Rank 1
answered on 13 Jan 2020, 05:30 PM

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,

 

0
Stefan
Telerik team
answered on 14 Jan 2020, 08:02 AM

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
Tags
General Discussions
Asked by
Abhay
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Abhay
Top achievements
Rank 1
Share this question
or