Universal javascript compatibility

My project is partially rendered server-side. I stumble on importation issue while behind my express server.

  import Datamap from 'datamaps';

Triggers an error “ReferenceError: window is not defined”

  var d3 = window.d3, topojson = window.topojson;

How do I properly import datamaps ?

[markmarkoh]

@Guibod that’s a great question - I’ve never tried running it on the server before.

Can you give this branch a shot and see if it gets around the error?

[darkalor]

We’re using react with some of the stuff rendered on server side, and we actually managed to run this fine with the current version just by deferring any rendering of maps by calling require("datamaps") only when components have mounted (i.e. things got sent to client side). Alternatively if you use webpack you can inject some variables and have a fake “window” object.

@markmarkoh I’m a bit confused by your solution. In the code you have

  if (typeof exports === 'object') {
    d3 = require('d3');
    topojson = require('topojson');
    module.exports = Datamap;
  }
  else if ( typeof define === "function" && define.amd ) {
    define( "datamaps", ["require", "d3", "topojson"], function(require) {
      d3 = require('d3');
      topojson = require('topojson');

      return Datamap;
    });
  }
  else {
    window.Datamap = window.Datamaps = Datamap;
  }

Meaning that you already have proper handling for server side imports.

So what exactly is the point of fetching your dependencies here (outisde the environment check) instead of in the above block?

  // Save off default references
  var d3 = root.d3, topojson = root.topojson;