ERROR #98123 WEBPACK Generating development JavaScript bundle failed Can't resolve 'svg-maps' in '/gatsby-project/src/components'

[ziyadbasheer]

https://github.com/ziyadbasheer/svg-maps

I've forked the repo, added a map, but can't seem to get it to work:

ERROR #98123 WEBPACK
Generating development JavaScript bundle failed
Can't resolve 'svg-maps' in '/gatsby-project/src/components'
File: src/components/worldmap.js
failed Building development bundle - 6.018s

Line in question is: import world from 'svg-maps' within the worldmap.js component.

I've been banging my head against the wall for 3 hours now trying to figure it out. Any help is super appreciated, thanks!

[VictorCazanave]

Could you give a link to gatsby-project please?

I tried the world map you added and it works.

[ziyadbasheer]

After hours of struggle I simply copied the package and imported it directly as a component, so no svg-maps, just react-svg-maps, perhaps that should be added as an alternative option in the readme?

Thank you for your great work!

[VictorCazanave]

@ziyadbasheer I don't really understand your issue but I'm glad you resolved it 😃

Just for you information:

• if you want to add a map in svg-maps, you should create a PR (as described in the contribution guide) and wait for it to be merged and published. Then you can install the new map (npm install --save @svg-maps/new-map) and import it (import NewMap from '@svg-maps/new-map') in your project to use it with react-svg-map (or another component).
• if you want to use a custom map without adding it to svg-maps, you can create the JS map or generate it with the svgToJs script, then move the file into your project and import it like any other file to use it with react-svg-map (or another component).

Although it is mentioned in react-svg-map documentation, it may not be clear enough. So if you have any suggestion to improve the documentation, feel free to create a PR!