d3-geo not working in React

[QCmu]

I was trying to implement a bubble map chart in React, using the example of Mercator projection. However, I got errors about cannot find geoMercator all the time. I imported d3 by npm but got the error of function missing. I tried d3-geo, and d3-geo-projection but none of them works. As a newbie of React any help is appreciated!
Error:

WorldMap.js:61 Uncaught (in promise) TypeError: _d2.default.geoMercator is not a function

Code:
`import $ from 'jquery';
import ReactFauxDOM from 'react-faux-dom';
import firebase from 'firebase';
import React from 'react';
import d3 from 'd3';
import d3geo from 'd3-geo-projection';
import topojson from 'topojson';

class WorldMap extends React.Component {
constructor(props) {
super()
}

render(){

    var width = 960,
    height = 600;

var projection = d3.geoMercator()
                    .scale((width - 3) / (2 * Math.PI))
                    .translate([width / 2, height / 2]);

var path = d3.geoPath()
    .projection(projection);

var graticule = d3.geoGraticule();

var svgNode = ReactFauxDOM.createElement('div');

var svg = d3.select(svgNode).append("svg")
    .attr("width", width)
    .attr("height", height);
svg.append("defs").append("path")
    .datum({ type: "Sphere" })
    .attr("id", "sphere")
    .attr("d", path);

svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");
svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

d3.json("./maptest.json", function(error, world) {
    if (error) throw error;

    svg.insert("path", ".graticule")
        .datum(topojson.feature(world, world.objects.land))
        .attr("class", "land")
        .attr("d", path)
        .style("fill", "gray");

    svg.insert("path", ".graticule")
        .datum(topojson.mesh(world, world.objects.countries, function(a, b) {
            return a !== b; }))
        .attr("class", "boundary")
        .attr("d", path)
        .style("fill", "gray");
});

svg.selectAll("circle")
        .data(this.cases)
        .enter().append("circle", ".pin")
        .attr("r", 2)
        .attr("transform", function(d) {
            return "translate(" + projection([
                d.longitude,
                d.latitude
            ]) + ")";
        })
        .style("fill", "steelblue");

return svgNode.toReact();

}

}

export default WorldMap;

`

[curran]

Try

import * as d3 from 'd3'

or

import { geoMercator } from 'd3'

[QCmu]

@curran Thanks but still not working.
WorldMap.js:62 Uncaught (in promise) TypeError: d3.geoMercator is not a function

[mbostock]

This looks like an import error, but I can’t say whether it was just your attempt to import the default export that doesn’t exist, or if there is a problem with your React toolchain configuration such that it’s not importing from the package.json’s defined module entry (rather than the main entry which points to the Rollup-generated ES5 bundle which is strongly not recommended for ES6 and later environments).