Uncaught Error: Invalid hook call. ReactJs

Question

I am relatively new to react and I am trying to render a leaflet map on my site but I am currently getting an Invalid Hook call error. Any information would be greatly appreciated. Thanks in advance. Code Below

import React from "react";
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import styled from 'styled-components';

const Wrapper = styled.div`
    width: ${props => props.width};
    height: ${props => props.height};
`;

export class Map extends React.Component {

    componentDidMount(){
        this.map = L.map('map', {
                center: [58, 16],
                zoom: 6,
                zoomControl: false
        });

        L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
            detectRetina: true,
            maxZoom: 20, 
            maxNativeZoom: 17,  
        }).addTo(this.map);
    }

    render() {
        return <Wrapper width="400px" height="400px" id="map"/>
    } 
}

export default Map;

Answer 1

Possible underlying cause: I got the same error when I forgot to install the leaflet packages: I drafted a map component in a separate app, copied the map component to my main app, but didn't install the dependencies. After installing leaflet and react-leaflet, everything worked as intended. For some reason, npm start didn't complain about the missing packages in this case but react hit me with the Invalid Hook call error instead. Versions: [email protected], [email protected].