Could not find a declaration file for module 'react-scroll-to-bottom'

Question

I installed react-scroll-to-bottom and its showing in by dependencies but I keep getting this error:

Could not find a declaration file for module 'react-scroll-to-bottom'. 'c:/Users/J/Desktop/webapps/ChatApp/client/node_modules/react-scroll-to-bottom/lib/index.js' implicitly has an 'any' type. Try npm install @types/react-scroll-to-bottom if it exists or add a new declaration (.d.ts) file containing declare module 'react-scroll-to-bottom';

This is my package.json file.

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "query-string": "^6.13.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-emoji": "^0.5.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-scroll-to-bottom": "^4.0.0",
    "socket.io-client": "^2.3.0"
  },

and here is my js code:

import React from 'react';

import ScrollToBottom from 'react-scroll-to-bottom';

import Message from './Message/Message'

import './Messages.css';




const Messages = ({ messages, name }) => (
    <ScrollToBottom classname="messages">
        {messages.map((message, i) => <div key={i}><Message message={message} name={name} /></div>)}
    </ScrollToBottom>
);

export default Messages;

check in your npm modules , dependencies and devdependencies are just a reference. — Alexander Solonik

simon simon · Accepted Answer · 2020-10-27T03:10:17

so what I did was look for other means of achieving the scroll to bottom effect, and this what I used:

import React, { useEffect, useRef } from "react";


const Messages = ({ messages, name }) => {
    const messagesEndRef = useRef(null);
    const scrollToBottom = () => {
        messagesEndRef.current.scrollIntoView({ behavior: "smooth" });
    };
    useEffect(scrollToBottom, [messages]);

    return (
        <div className="messages">
            {messages.map((message, i) => <div key={i}><Message message={message} name={name} /></div>)}
            <div ref={messagesEndRef} />
        </div>
    );
};

Could not find a declaration file for module 'react-scroll-to-bottom'

1 Answers