Error while importing handsontable HotTable within a jhipster react project

While importing handsontable HotTable in a jhipster project react project encountered following error.

ERROR in /node_modules/@handsontable/react/types.d.ts.
Module ‘“../../@types/react-redux”’ has no exported member ‘ConnectedComponent

I was using jhipster version 6.8.0, typescript 3.7.3, eslint 6.7.2.

React-Redux is currently written in plain JavaScript. However, it works well with static type systems such as TypeScript and Flow. React-Redux doesn’t ship with its own type definitions. If you are using Typescript you should install the @types/react-redux type definitions from npm. Thats why jhipster project comes with both react-redux and @types/react-redux package installed.

The cause for the error is that Jhipster 6.8.0 comes by default with @types/react-redux version 6.0.6. This version of @types/react-redux does not contain an exported member ConnectedComponent.

Solution

First Method (Not recommended):
Since jhipster project also comes with react-redux version 7. Modify the node_modules/@handsontable/react/types.d.ts file.
Replace the line
import {ConnectedComponent} from ‘react-redux’ ;
to
import {ConnectedComponent} from ‘../../react-redux’ ;

In the first line, the npm looks for ConnectedComponent in @types/react-redux library. In the replaced line the npm looks for ConnectedComponent in react-redux library.

Second Method

Upgrade your jhipster project to 6.9.0. This upgrade comes with dependency @types/recat-redux version 7.1.7. newer version have exported ConnectedComponent. so the error will be eliminated.