kadoshms/react-jvectormap

Duplicated render of map (simple example)

Closed this issue · 8 comments

chrisheseltine commented

I am using a super simple example in a bootstrap'd create-react-app (React 18). Nothing unusual about the methods or code used.

import { VectorMap } from 'react-jvectormap'

<VectorMap map='world_mill' className='jvectormap-without-padding' backgroundColor='transparent' />

Result is two maps are rendered. If I change my code then React hot-reloads that bit of the view, when this happens I get just one map. Once refreshed I see two maps again. Any idea what can be causing this? I am using React 18 with strict mode, is it the double-render for components that this lib doesn't support?

Edit: I can "fix" the issue by setting overflow to 'hidden' on the parent container, so only one map is seen, but this is more of a hack than a solution. Real solution still appreciated.

kadoshms commented

What version of the package are you using?
The package is now published under @react-jvectormap/core and not react-jvectormap which is deprecated

chrisheseltine commented

Okay, that makes more sense... I saw that this package here had many more downloads than that one there, but I will try this newer version and inform. Thanks.

chrisheseltine commented

I'm unable to install the suggested package on React 18 as it requires React 17. Are there any plans/ways to support React 18?

kadoshms commented

Havn't tested it yet.
Anyway, as it's a peer depdencny not a dependency, it shouldn't block you from installing.

chrisheseltine commented

It appears to be a depedency to me as it is blocking install.

$ npm install --save @react-jvectormap/core
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: ssp-video-player-metrics@0.2.1
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"~17.0.2" from @react-jvectormap/core@1.0.2
npm ERR! node_modules/@react-jvectormap/core
npm ERR!   @react-jvectormap/core@"*" from the root project
kadoshms commented

Alright, let me check this out anytime soon

  • ❤️1
kadoshms commented

@chrisheseltine I updated the peer-dependencies requirements, can you please try agian?

  • 🎉1
chrisheseltine commented

Issue is now resolved by updating the core package and refs, and adding package for pre-built map and passing that ref to VectorMap. Thanks!