Simple NeshanMap rendering error

[mogaozq]

This is error is thrown whenNeshanMap is rendering:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
   at resolveDispatcher (react.development.js:1476)
   at useRef (react.development.js:1515)
   at NeshanMap (NeshanMap.js:10)
   at renderWithHooks (react-dom.development.js:14985)
   at mountIndeterminateComponent (react-dom.development.js:17811)
   at beginWork (react-dom.development.js:19049)
   at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
   at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
   at invokeGuardedCallback (react-dom.development.js:4056)
   at beginWork$1 (react-dom.development.js:23964)
   at performUnitOfWork (react-dom.development.js:22776)
   at workLoopSync (react-dom.development.js:22707)
   at renderRootSync (react-dom.development.js:22670)
   at performSyncWorkOnRoot (react-dom.development.js:22293)
   at react-dom.development.js:11327
   at unstable_runWithPriority (scheduler.development.js:646)
   at runWithPriority$1 (react-dom.development.js:11276)
   at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
   at flushSyncCallbackQueue (react-dom.development.js:11309)
   at NotifyManager.batchedUpdates$1 [as batchNotifyFn] (react-dom.development.js:22387)
   at notifyManager.js:70

my react version:
"react": "^17.0.1"

[sarangsami]

move libarary from node_modules into your components folder then edit it yourself i have tried to contact them but they have poor support

[mogaozq]

I wanted to use NeshanMap just as a Geo location picker. I've done it with another library and its ok.
And thank you for the comment.

[mahdiafzal]

I have the same mistake!
"react": "^16.13.1"

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (react.development.js:1438)
    at useRef (react.development.js:1478)
    at NeshanMap (NeshanMap.js:14)
    at renderWithHooks (react-dom.development.js:14797)
    at mountIndeterminateComponent (react-dom.development.js:17409)
    at beginWork (react-dom.development.js:18489)
    at HTMLUnknownElement.callCallback (react-dom.development.js:189)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:238)
    at invokeGuardedCallback (react-dom.development.js:291)
    at beginWork$1 (react-dom.development.js:23055)
    at performUnitOfWork (react-dom.development.js:22019)
    at workLoopSync (react-dom.development.js:21995)
    at performSyncWorkOnRoot (react-dom.development.js:21613)
    at scheduleUpdateOnFiber (react-dom.development.js:21045)
    at updateContainer (react-dom.development.js:24194)
    at react-dom.development.js:24577
    at unbatchedUpdates (react-dom.development.js:21763)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24576)
    at Object.render (react-dom.development.js:24659)
    at Module../src/index.js (index.js:38)
    at __webpack_require__ (bootstrap:782)
    at fn (bootstrap:150)
    at Object.0 (serviceWorker.js:240)
    at __webpack_require__ (bootstrap:782)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

---

The above error occurred in the <NeshanMap> component:
    in NeshanMap (at DraggableExample.jsx:636)
    in div (at DraggableExample.jsx:635)
    in div (at DraggableExample.jsx:566)
    in MyMap (at CreateAddress.jsx:255)
    in CreateAddress (at App.jsx:521)
    in Route (at App.jsx:516)
    in Switch (at App.jsx:513)
    in div (at App.jsx:512)
    in div (at App.jsx:511)
    in App (created by Jss(App))
    in Jss(App) (at src/index.js:27)
    in GAListener (created by Context.Consumer)
    in withRouter(GAListener) (at src/index.js:26)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:25)
    in Provider (at src/index.js:24)
    in ThemeProvider (at src/index.js:23)
    in ReactApp (at src/index.js:38)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

[mohammadFeiz]

-## there is hook error in using by npm.
-## instead bring files locally in your project to fix problem.
1 - create neshan-map folder in your project.
2 - add neshan-map.js by below codes:

import React, { useEffect, useRef } from "react";
import "./index.css";
const BASE_URL = "https://static.neshan.org";
const DEFAULT_URL = `${BASE_URL}/sdk/leaflet/1.4.0/leaflet.js`;
function NeshanLoader (props){
  const createScript = () => {
    const { onError, onLoad } = props;
    const script = document.createElement("script");

    script.src = DEFAULT_URL;

    script.onload = () => {
      if (onLoad) onLoad();
      return;
    };

    script.onerror = () => {
      if (onError) onError();
      return;
    };

    document.body.appendChild(script);
  };

  return createScript();
};
const NeshanMap = (props) => {
  const { style, options, onInit } = props;
  const mapEl = useRef(null);

  const defaultStyle = {
    width: "600px",
    height: "450px",
    margin: 0,
    padding: 0,
    background: "#eee",
  };

  const defaultOptions = {
    key: "YOUR_API_KEY",
    maptype: "dreamy",
    poi: true,
    traffic: false,
    center: [35.699739, 51.338097],
    zoom: 14,
  };

  useEffect(() => {
    NeshanLoader({
      onLoad: () => {
        let map = new window.L.Map(mapEl.current, { ...defaultOptions, ...options });
        if (onInit) onInit(window.L, map);
      },
      onError: () => {
        console.error("Neshan Maps Error: This page didn't load Neshan Maps correctly");
      },
    });
  });
  return <div ref={mapEl} style={{ ...defaultStyle, ...style }} />;
};

export default NeshanMap;

3 - add index.css by below code:

@import url('https://static.neshan.org/sdk/leaflet/1.4.0/leaflet.css');

4 - import NeshanMap Component to your file and use in your component.

import React,{Component} from 'react';
import NeshanMap from '../neshan-map/neshan-map';

...
<NeshanMap
    options={{
        key: 'web.3b7ae71ad0f4482e84b0f8c47e762b5b',
        center: [35.699739, 51.338097],
        width:'100%',
        zoom: 13,
        maptype:'standard-day'
        }}
        onInit={(L, myMap) => {
        let marker = L.marker([35.699739, 51.338097])
        .addTo(myMap)
        .bindPopup('I am a popup.');

        myMap.on('click', function (e) {
        marker.setLatLng(e.latlng)
        });

        L.circle([35.699739, 51.338097], {
        color: 'dodgerblue',
        fillColor: 'dodgerblue',
        fillOpacity: 0.5,
        radius: 1500
        }).addTo(myMap);
    }}
    style={{
        width:'100%',
        height:'300px'
    }}
/>
...