Could not find a declaration file for module 'react-query' - reactjs

I am refactoring a piece of code and it shows this type of error whenever I try to import "react-query

I ran into the same thing and had to downgrade to version 3.
npm i react-query#3
Or for 4+
npm i #tanstack/react-query

It's because you are importing into a TypeScript file and it can't find the type declaration for the imported module. Normally all you need to do is to follow the given instructions and open a command prompt, go to the directory D:\overview and type:
npm i --save-dev #types/react-query

react-query was renamed to #tanstack/react-query in v4. You need to rename all your imports from react-query to #tanstack/react-query.
You don't need to install #types/react-query. v4 is already written in typescript.

Related

Module not found: Can't resolve 'react-icons/ai'

I am learning ReactJS. But now I got a problem. I used this code
import { AiOutlineShoppingCart } from "react-icons/ai"
But it is showing this error:
Module not found: Can't resolve 'react-icons/ai'
I am using sanity to build an eCommerce website cms. I tried to install react-icons with this code
yarn add react-icons
and I have checked the packages .jeson file and react-icons are present in dependencies. Can anyone please tell me how can I solve this problem?
Some extra info:
I have also use react-icons instead of react-icons/ai but same error
I have used npm install to install react-icons. Nothing helps
Firstly, you should be aware that not all icons are available. I sometime try to import some icons and I get error.
Secondly, make sure you copy the code from the website to make sure you didnot misspell the name
Futhermore, you can delete your node_module and remove react-icons from package.json file, then do yarn add react-icons and do yarn to install all your packages again
Lastly, you're to import from the library that owns the icon, i.e. if you're importing from AiFillAudio, you're to import it from react-icons/ai. eg.
import { AiFillAudio } from react-icons/ai.
I hope this help you out.
try reinstalling with npm install react-icons --save command
I figured it out. My react-icons are installed in sanity the folder. So when I was importing AiOutlineShoppingCart from react-icons, my program was looking for react-icons inside node_module of my main file. But it is stored node_module of sanity. So I have to declare the whole path.
Working code is
import { AiOutlineShoppingCart } from "../sanity/node_modules/react-icons/ai"
Here, "sanity" means sanity folder name.
Thanks, everyone for helping me.
This sometimes occurs when you install dependencies in the wrong directory.
let's say you run npm i package-x outside your project directory

Why Typescript is not recognizing min.js and .js import?

Hi I am trying to import some js file of a installed dashboard in a typescript file of React app. But it is not working, Below I have added a screenshot of the imports and error.
Please help:
The error msg tells you precisely what to do:
npm i --save-dev #types/adminbsb-materialdesign
In order for typescript to work with external libraries you need to import type definitions (*.d.ts) for them. --save-dev makes the package available in dev time only.

SCSS compilation issue in #material/button/_mixins.scss

issue-screen-shot
I'm getting this issue it's quite troublesome can anyone please help me out reagarding this issue...
I'm getting this issue when trying to build my react project.
build script screen-shot
node-sass already addedd
To get MDC React Components to work with create-react-app you need to set a SASS_PATH environment variable that points to your node_modules directory. To quickly do this on OS X or Linux enter the following in your command line:
export SASS_PATH=./node_modules
If you're on Windows use the following:
SET SASS_PATH=.\node_modules
Rename your src/App.css file to src/App.scss.
You will also need to install node-sass:
npm install node-sass

react-bootstrap-table-next doesn't have type script to support import

After I installed react-bootstrap-table-next, I tried to use
"import BootstrapTable from 'react-bootstrap-table-next';" in my tsx file. As example showed in here
I got error message says "Could not find a declaration file for module 'react-bootstrap-table-next'. '../node_modules/react-bootstrap-table-next/lib/index.js' implicitly has an 'any' type."
And I run npm install #types/react-bootstrap-table-next, but couldn't find any.
Does anyone has same issue? or how did you solve the problem?
Ron
Right now it looks like there are no plans to support Typescript by the team that develop the project.
You can track the develop of the issue here on this issue and maybe you can vote up. I'm also waiting for it.
You can use this package. There is support for TypeScript now.
npm install --save #types/react-bootstrap-table-next
or
yarn add #types/react-bootstrap-table-next
try running
npm install react-bootstrap-table-next --save

Jest fails with error: Cannot find module 'react/lib/ReactComponentTreeHook'

I have installed Jest v17.0.3 in my react project.
When I run jest locally it works fine, but on the build server it fails with:
Error: Cannot find module 'react/lib/ReactComponentTreeHook' from 'ReactDebugTool.js'
Both machines are running node version 6.9.1 and npm version 4.0.2.
use same version of react and react-dom. My problem fixed after using this command
npm install --save react#15.4.0 react-dom#15.4.0
this problem specially occurs on react 15.4.0 above.
Can you check which version of React you are using? Is it the same on both servers? I would try removing node_modules and reinstalling the dependencies. The reason I am suggesting this is that in React v15.4.0 you cannot import private apis and it seems that ReactDebugTools.js is trying to import from react/lib/....
From the blogpost about React v15.4.0 (Link):
However, there is a possibility that you imported private APIs from react/lib/*, or that a package you rely on might use them. We would like to remind you that this was never supported, and that your apps should not rely on internal APIs. The React internals will keep changing as we work to make React better.
Hope this helps!
In the latest versions of react we often see this error as we have loaded 2 versions of react:
To make sure you have just 1 version, run the following in your terminal:
npm ls react-dom
npm ls react
Both the react and react-dom versions need to be same.
If any one of these returns more than 1 version then that's not supported. You have to then correct it in your corresponding package.json
I had the same issue and i removed the node_modules and ran npm install and it fixed the problem.

Resources