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';
Related
I'm using Sveltekit and I upgraded chart.js from #2.9.4 to its latest version, upon upgrading I get the below error:
500
The requested module '/node_modules/.vite/deps/chart_js.js?v=425f86ec' does not provide an export named 'default'
SyntaxError: The requested module '/node_modules/.vite/deps/chart_js.js?v=425f86ec' does not provide an export named 'default'
I get above stated error as I import it as below:
import chartjs from 'chart.js';
I also get the same error in any version above chart.js#2.9.4.
Thank You.
Chart.js V3 is treeshakable so you need to import and register everything or if you want everything you need to import the chart from the auto import like so:
import Chart from 'chart.js/auto';
For more information about the different ways of importing and using chart.js you can read the integration page in the docs.
Since you are upgrading from Chart.js V2 you might also want to read the migration guide since there are some major breaking changes between V2 and V3
I am trying to import d3.js as follows
import * as d3 from "d3";
I have also tried the following way
const d3 = require('d3');
And I am getting the following error once the js script runs
I am using parcel to build my project, and everything has worked fine until now. From some initial digging, this seems to be related to babel from looking at related posts.
Uncaught ReferenceError: regeneratorRuntime is not defined in react 17, webpack 5 while making api calls through actions
However, adding the suggested fixes to my package.json file under the babel options has not yielded any fixes so far...
Any thoughts?
I am using the Aurelia Framework and I just installed the Highcharts (v6.1.2) library for graphs etc.
When I import Highcharts:
import * as Highcharts from "highcharts";
I am able to use the lib with the standard graph types like column/bar/line etc.
When I am trying to use a graph of type 'xrange' I always get this error:
Error: Highcharts error #17
according to which I haven't included the appropriate module for this type (it resides in /node_modules/highcharts/modules/xrange.js).
BUT when I do:
import Xrange 'highcharts/modules/xrange'
or just
import 'highcharts/modules/xrange'
I get that the module cannot be found!
Any idea on how to load the module I need??
Thank you!
Have you tried the suggested method Load Highcharts as an ES6 module
import * as Highcharts from 'highcharts';
// Load the Xrange module.
import * as Xrange from 'highcharts/modules/xrange';
// Initialize Xrange module.
Xrange(Highcharts);
I think this is a general question about how to make a library usable with ES6's import:
I want to use DimpleJS (a JS library for charts) in my React app.
I ran npm install --save dimple-js
I added import * from 'dimple-js' to my React component
At this point I get a Syntax Error: Unexpected token (2:9) which is the space after my import *.
Why do I get this error? How should I correctly import this into my project?
Working on my first TypeScript project and I am using the fetch api but I need to use a poly fill for the other browsers out there. I would like to use Whatwg-fetch from Github and I have installed the module with NPM and I have the typings file from Definitely Typed.
When the code in compiled fetch poly fill will not be included and I am not sure how to add it as any time I import Typescript errors.
I am using Grunt, Browserify, TypeScript and React.
I have tried to import with
import {fetch} from 'whatwg-fetch';
and
import fetch = require('whatwg-fetch');
The definitions are in my main tsd.d.ts file that is included on the page.
Thanks for any help or directions.