Wsrtjtyk

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).

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';

you should update

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

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';