0

I'm using D3 v5 in React and has a visualization that uses v3. I'm using npm modules for the v5 but for v3, I'm trying to import D3 to be used in that visualization.

In my component I have:

import * as d3 from './lib/d3/v3/d3';

and in the d3 folder's d3.js, the minified v3 d3 script:

const d3 = !function(){function n(n){return n&&(n.ownerDocument||n....

export default d3;

butI get the following error:

Failed to compile.

./src/components/d3/NetworkTopology/D3_NetworkTopology.js
Attempted import error: 'behavior' is not exported from './lib/d3/v3/d3' (imported as 'd3').

NetworkTopology.js:

  ...
  const zoom = d3.behavior
    .zoom()

"behavior" was removed in v4 so to me it looks like this is pulling the D3 V5 version instead of V3. How can I set this up to use both versions of D3?

I changed the import to:

import d3 from './lib/d3/v3/d3';

but got these compile errors: Failed to compile.

./src/components/d3/NetworkTopology/lib/d3/v3/d3.js

  Line 1:   Expected an assignment or function call and instead saw an expression  no-unused-expressions

and I get the same error with the original import * as d3 from './lib/d3/v3/d3'; combined with removing the const and export in the d3.js (just use the original minified file).

user994165
  • 9,146
  • 30
  • 98
  • 165
  • I am not sure if [a question I asked earlier](https://stackoverflow.com/questions/52529544/d3-event-is-null-in-modular-d3-project) helps. Try not exporting d3 and just use it because it seems to be a global variable for all d3 components. – jrook Nov 07 '18 at 20:26
  • @jrook, I tried that but get a bunch of compile errors (updated the question at the end.) – user994165 Nov 07 '18 at 21:40

3 Answers3

0

I don't think this has anything to do with the versions of d3. Your problem is that your script with the minified library has a single export default d3 (an export with the name default bound to a constant with the value of d3), while your component does a namespace import * as d3 which means that d3 will be a module object containing all exports - in your case, only the default one. So d3.default.behaviour could work. But you should just change your import to not use namespace objects but instead have the single value imported directly:

import d3 from './lib/d3/v3/d3';
// which is short for
import { default as d3 } from './lib/d3/v3/d3';
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • I switched it but I got a compile error now (question updated at the end.) – user994165 Nov 07 '18 at 21:28
  • @user994165 Not sure about that, but it doesn't seem to be related to the imports. Might be a problem with running a linter on a minified script? – Bergi Nov 07 '18 at 22:06
0

you should update 

    import d3 from './lib/d3/v3/d3';
Yasin Tazeoglu
  • 884
  • 8
  • 14
0

While the previous answers got me around the original error in the top portion of my question, by using:

import d3 from './lib/d3/v3/d3

, I ended up getting ES-Lint errors, which I got around by adding

/* eslint-disable */

Howevever, I then got an error caused by Babel inserting "use strict" on the D3 minified code. Since Create React App doesn't allow modification of the Babel configuration without ejecting the application, I was stuck. I thought about putting in a script in the template or an AJAX call to get the D3 script from a CDN, but I'm not sure it would have worked with the two D3 versions in the same app.

What eventually worked was the following. I cloned the earlier version of D3 into a directory at my app's root, then I modified the name in its package.json to be 'd3-v3' and renamed the directory to 'd3-v3'. Scoped npm package naming would have been preferable for the package name.

Then I did a: 

npm install file:./d3-v3

From my React component I used the following for D3 v3

import * as d3 from 'd3-v3';

and for v5 used:

import * as d3 from 'd3';
user994165
  • 9,146
  • 30
  • 98
  • 165