d3 4.0 - import statement gives __moduleExports wrapper
<p>I'm having trouble with an import statement in D3 4.0 and Ionic2/Angular2 project.</p>

<p>I believe I am using the correct import statement, and everything compiles. </p>

<pre><code>import * as d3Request from 'd3-request'; 

export class HomePage { 

  constructor() {

    d3Request.xml('assets/mysvg.svg')
      .mimeType("image/svg+xml")
      .get(function(error, xml) {
        if (error) throw error;
        document.body.appendChild(xml.documentElement);
      });
   }
}
</code></pre>

<p>Gets compiled to:</p>

<pre><code>var d3Request$1 = unwrapExports(d3Request);

var d3Request$2 = Object.freeze({
    default: d3Request$1,
    __moduleExports: d3Request
});

...
 d3Request$2.xml('assets/mysvg.svg')
    .mimeType("image/svg+xml")
    .get(function (error, xml) {
       if (error) throw error;
       document.body.appendChild(xml.documentElement);
    });
</code></pre>

<p>However, at runtime the <code>xml</code> function does not exist on <code>d3Request$2.xml</code>. It only exists on <code>d3Request$2.__moduleExports.xml</code>, but the code does not compile to that. What gives?</p>

<p>I also tried <code>import d3Request from 'd3-request'</code> which also compiles but still doesnt work. Results in: </p>

<pre><code>var d3Request$1 = unwrapExports(d3Request);

...
d3Request$1.xml('assets/emojis/laughing.svg')
   .mimeType("image/svg+xml")...
</code></pre>

<p>However, this still doesn't work because <code>d3Request$1</code> end up being undefined. <code>d3Request.xml</code> exists but the code doesnt compile to that, it compiles to <code>d3Request$1.xml</code>!</p>