Progress® Telerik® Reporting Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 10 May 2023 15:36 by ADMIN
Simon
Created on: 16 Jun 2022 14:08
Type: Bug Report
3
React Report Viewer throws error ts7016 on importing it in a TypeScript project

React Report Viewer throws error ts(7016) on importing it in a TypeScript project:

Could not find a declaration file for module '@progress/telerik-react-report-viewer/dist/cjs/main'. 'C:/Users/dnikolov/Desktop/ReactTypesScript/my-app/node_modules/@progress/telerik-react-report-viewer/dist/cjs/main.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/progress__telerik-react-report-viewer` if it exists or add a new declaration (.d.ts) file containing `declare module '@progress/telerik-react-report-viewer/dist/cjs/main';`

Duplicated Items
3 comments
ADMIN
Dimitar
Posted on: 10 May 2023 15:36

Hi Marcus,

Have you tried using @ts-ignore? I tested it locally and was able to avoid the errors this way:

//@ts-ignore
import { TelerikReportViewer } from '@progress/telerik-react-report-viewer'

Though, please keep in mind that besides this, you also need to make sure that the report viewer is not used in a component wrapped by the <StrictMode> element, otherwise, the project will be compiled but there will be errors upon rendering.

I hope this will help, please let me know if you need further assistance.

Regards,
Dimitar
Progress Telerik

Stay tuned by visiting our roadmap and feedback portal pages, enjoy a smooth take-off with our Getting Started resources, or visit the free self-paced technical training at https://learn.telerik.com/.
Marcus
Posted on: 03 May 2023 18:38

The solution presented did not solve any issues. we are unable to get the TelerikReportViewer because the error shows as

TS7016: Could not find a declaration file for module '@progress/telerik-react-report-viewer'. 'C:/Users/Marcus.Whelan/source/repos/Express.CRP/UIWeb/express-ui/node_modules/@progress/telerik-react-report-viewer/dist/cjs/main.js' implicitly has an 'any' type.   Try `npm i --save-dev @types/progress__telerik-react-report-viewer` if it exists or add a new declaration (.d.ts) file containing `declare module '@progress/telerik-react-report-viewer';`

And adding the declare statement below does nothing. Even changing the declare to match the import then the component gets an error about 'TS2607: JSX element class does not support attributes because it does not have a 'props' property.'

and

 

TS2786: 'TelerikReportViewer' cannot be used as a JSX component.   Its instance type 'TelerikReportViewer' is not a valid JSX element.     Type 'TelerikReportViewer' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

William
Posted on: 05 Jul 2022 01:50

A workaround is to 

* Add a file with any name name.d.ts in your src folder. I named mine index.d.ts

* put this in the file just like this
   declare module "telerik-react-report-viewer";

* In your tsconfig.json file add this to the compilerOptions

  "noImplicitAny": false,

Create an account Log In
View
Type
Status