Cannot import d3-tip or d3-hexbin into React component

Question

Edit: I'm actually not sure whether it is the case that I am (a) importing wrong or (b) calling the functions wrong...

I've seen related posts on this (d3-tip import / setup issue), but none of them seem to touch on the specific issue of getting it to work in React.

I have a react app with a component that is a simple d3 graph component. My import lines for this d3 component js file, along with the calling of d3.hexbin and d3.tip, is shown below:

myD3Component.js

import React, { Component } from 'react';
import * as d3 from "d3";
import * as d3Tip from "d3-tip";
import * as d3Hexbin from "d3.hexbin";

class myD3Component extends Component {
    constructor() { ... }

    helperFunc() {
      var hexbin = d3.hexbin()
        .radius(1.5)
        .x(d => d.key[0])  
        .y(d => d.key[1]); 

      var tip = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-20,0])
          .html('work come on baby lets work for once for me')    

      ...
    }

Importing in this way is not working, and I am receiving the following errors:

335:16-25 "export 'hexbin' (imported as 'd3') was not found in 'd3'
341:3-9 "export 'tip' (imported as 'd3') was not found in 'd3'
... 

my package.json has all of the following dependencies:

"dependencies": {
    "@fortawesome/fontawesome": "^1.1.5",
    "@fortawesome/fontawesome-free-solid": "^5.0.10",
    "@fortawesome/react-fontawesome": "0.0.18",
    "d3": "^5.0.0",
    "d3-hexbin": "^0.2.2",
    "d3-tip": "^0.7.1",
    "jquery": "^3.3.1",
    "plotly.js": "^1.35.2",
    "react": "^16.2.0",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.2.0",
    "react-icons": "^2.2.7",
    "react-plotly.js": "^2.1.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.1.1",
    "react-select": "^1.2.1",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  },

Any help is appreciated on this. This has been a big struggle for me today and over the last couple of days. In codepen I have been able to build my components and have had no issue with importing d3-tip and d3-hexbin, however this is because I can add the scripts manually in the codepen javascript pen settings window.

Thanks in advance!

Edit 2: I've managed to move to a new error:

Module not found: Can't resolve 'd3.hexbin' in ...

Edit 3: error above is dumb, i was importing as 'd3.hexbin' when should have been d3-hexbin...

Answer 1

So... a few things...

If you do an

import * as d3 from "d3";

You can't then do d3.bananas = 'whatever'; because d3 is a Module and not a raw Javascript Object. The React compiler hates you assigning things into a Module. (If I'm wrong about that behaviour can someone with more familiarity with the Module type in js let us know?)

What you can do... (it's a little sketchy) is copy the imported Module into a new raw Javascript Object. Then you can diddle with it however you like, although it's probably not good practice to do so because you can diddle with it however you like.

import * as d3module from 'd3'
import d3tip from 'd3tip'
const d3 = {
  ...d3module,
  tip: d3tip
}

I tested this briefly with [email protected] and [email protected] and it seemed to be okay.