Could not find a declaration file for module 'react-reveal/Fade'

user_12874095 0
Viewed 1648

I want to use react-reveal package in my react project. I installed it. But react can not find module

Could not find a declaration file for module 'react-reveal/Fade'.

But react-reveal shows in package.json file and node module.

"dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^4.6.0",
    "jquery": "^3.6.0",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^17.0.2",
    "react-parallax": "^3.3.0",
    "react-reveal": "^1.2.2",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-scroll": "^1.8.2",
    "react-water-wave": "^1.0.5",
    "web-vitals": "^1.1.2"
  },

I tried to install npm i --save-dev @types/react-reveal.

Then this error comes

'@types/react-reveal@latest' is not in the npm registry.

How can I solve this?

Note: I am not using typescript

webpack-4 webpack reactjs
2 Answers

Use require to import the package

import "./Product.scss"
//use require to import the module
const Fade = require("react-reveal/Fade")

export interface IProduct {
    price: number
    title: string
    img: string
}
const Product: React.FC<IProduct> = ({ price, title, img }) => {
    return (
        <Fade bottom cascade>
            <li className="product-wrapper">
                <div className="product-container">
                    <img src={`${img}`} alt="" />
                    <div className="main-details">
                        <div className="title">{title}</div>
                        <div className="details">
                            <div className="price">Price: $ {price}</div>
                            <div className="button-wrapper">
                                <button className="button btn-primary">
                                    Add to cart
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </Fade>
    )
}

export default Product

Tried this implementation and it worked

user_137795290

Run this commands without typescript

nom install react-reveal

npm install react-reveal/Fade --save

OR

import { Fade } from 'react-reveal';
user_116623350
Related