TS2503: Cannot find namespace 'WebDataRocks' - webdatarocks

Question

I have a react application and I'm trying to use WebDataRocks to render data from my bd. But, when I try to build I'm getting an error that says:
TS2503: Cannot find namespace 'WebDataRocks'.
I tried several stuff, but I still receive the error. The only things that's working is when I add a flag of ignoring the typescript type of and index.d.js. But, I can't change the modules because it's not gonna work when I send the code for prod area.
My guess is the file should be tsx not ts. But, again I can't change the modules.
Any thoughts?

Answer 1

I kindly suggest creating a new project and embedding WebDataRocks to check how modules should be imported.
Here is a short guide:
If you don’t have a React+TS application yet, create one by running this command in the console:
npx create-react-app my-app --template typescript
cd my-app
Get the WebDataRocks React module from npm:
npm install react-webdatarocks
Add WebDataRocks’ styles to the src/index.tsx file:
import 'webdatarocks/webdatarocks.css'
Import the WebDataRocksReact module to the src/App.tsx file:
import * as WebDataRocksReact from 'react-webdatarocks';
Open src/App.tsx and add WebDataRocks there using the WebDataRocksReact.Pivot component:
function App() {
return (
<div className="App">
<WebDataRocksReact.Pivot
toolbar={true}
componentFolder="https://cdn.webdatarocks.com/"
width="100%"
report="https://cdn.webdatarocks.com/reports/report.json"
/>
</div>
);
}
Run your application:
npm start
Open http://localhost:3000/ in the browser — WebDataRocks is embedded into your React+TS project.