0

I want to use react-img-mapper for my app too make a clickable world map. i installed it with npm and imported like this.

import React from 'react'
import map from './coords.json'
import ImageMapper from 'react-img-mapper';
import world from './map.jpg'

export default function Map() {
    const url= world
    const imgg=map
    return (
        <>
        <ImageMapper src={url} map={imgg} />
        </>
    )
}


import React from 'react';
import ReactDOM from 'react-dom/client';
import Map from './components/Map';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

  <><Map /></>

)

after npm start there is a whitespace in browser and these errors in console.

where am i doing wrong?

Console errors:

mousetail
  • 7,009
  • 4
  • 25
  • 45
Amirosein Khd
  • 1
  • 1
  • You probably have multiple versions of react installed. Make sure your version if ImageMapper supports the version of react you use, otherwise your package manager will try to give it it's own instance – mousetail Jan 23 '23 at 10:05
  • I use react 18.2. how can i find out i don't have multiple versions? i use create react app. PS C:\Users\Amir\worldmapinfo> npm list react worldmapinfo@0.1.0 C:\Users\Amir\worldmapinfo ├─┬ @testing-library/react@13.4.0 │ └── react@18.2.0 deduped ├─┬ react-dom@18.2.0 │ └── react@18.2.0 deduped ├─┬ react-scripts@5.0.1 │ └── react@18.2.0 deduped └── react@18.2.0 – Amirosein Khd Jan 23 '23 at 10:32

0 Answers0