Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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...
                The imports appear okay? Calling the functions as d3Hexbin and d3Tip seems to have resolved the issue.
– Canovice
                May 17, 2018 at 5:54
                nevermind the issue has not yet been resolved... anyone using all 3 of these at once in a react app, please help!
– Canovice
                May 17, 2018 at 6:24
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 d3@5.12.0 and d3-tip@0.9.1 and it seemed to be okay.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.