Cannot set property 'vectorMap' of undefined

[0DevGuru0]

i implemented the jvectormap on react ssr with webpack but i warned this error and i dont know why its happen: error:

node_modules\react-jvectormap\build\index.js:6504
                l.fn.vectorMap = function (l) {
                               ^
TypeError: Cannot set property 'vectorMap' of undefined

[kadoshms]

Hey @afsan007 I'll need more info in order to look it up

[ghost]

@kadoshms I'm having the same problem... I'm using Next.js; if you load the page where the map is on the browser it renders fine, but if you load the page through the server - on a refresh, for example - the page crashes with the error @afsan007 posted.

I take a really quick look at the code and as far as I could understand, it depends on window to load the map... if I'm right, this is probably causing the problem with SSR :confused:

[janat08]

https://stackoverflow.com/questions/53139884/next-js-disable-server-side-rendering-on-some-pages/53191080

[janat08]

I suspect rendering it dynamically causes issues with the map being drawn very small.

[janat08]

Anyway in which to redraw it after mounting, or something? I tried rendering it inside an empty div with fixed height and width that isn't dynamically loaded.

[maxscience]

Same issue inside a Gatsby project. Any ideas?

[fullsuper]

If you are using nextjs 👀 This may be useful, it works for me: https://github.com/vercel/next.js/issues/2940

/* file using VectorMap*/
const VectorMap = dynamic(
  () => import("react-jvectormap").then((m) => m.VectorMap),
  { ssr: false, }
);
/* ... */
<VectorMap />

[iam-abbas]

Has anybody found a fix yet?

[chirumist]

In webpack Import like this

https://www.npmjs.com/package/jvectormap-next window.jQuery = window.$ = require('jquery'); require('jvectormap-next')(window.$); $.fn.vectorMap('addMap', 'world_mill', require('jvectormap-content/world-mill')); $.fn.vectorMap('addMap', 'de_merc', require('jvectormap-content/de-merc')); $.fn.vectorMap('addMap', 'us_aea', require('jvectormap-content/us-aea'));

[moaazassali]

Same issue inside a Gatsby project. Any ideas?

I am also using Gatsby, have you found a solution to it?

[kadoshms]

Hey guys, thanks for reporting this. Since this project started as a side husstle for a specific POC project, I havn't covered SSR at the first place.

I will take a deepr look into it in the upcoming vesrions.