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);
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 use SystemJS to import a module that lives on an external server. Having problems just getting started with importing systemjs so that I can use it in code.
import System from 'systemjs';
OR
import * as System from 'systemjs';
// System not found, error on line above trying to import systemjs as module.
System.import('https://test.com/modules/somemodule.js').then(module => {
// got the module
});
Neither work. This is all assuming its possible to use System.import(...) in code to import a module. Reading through the docs not really sure how to import systemjs.
Error:
Module not found: Error: Can't resolve 'systemjs'
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';
I am trying to integrate D3 and topojson using Meteor + Angular2
import { Component } from '#angular/core';
import template from './d3map.component.html';
import * from 'd3'
#Component({
selector: 'd3map',
template
})
export class D3MapComponent {}
I have also used below meteor command to install d3
meteor npm install --save d3
However, I get the below error
client/imports/app/d3map/d3map.component.ts (4, 15): Cannot find module 'd3'.
Any working examples/plunkr would help. Thank you
It seems like d3 is not installed.Do one thing go to .meteor folder of your project and open your packages file using any editor. check if D3 is installed or not in the list.
if not installed use meteor add d3js:d3 to install it. or some other package from atmospherejs.com
for reference try one of these. whichever works for you.
import * as D3 from 'd3/index';
import * as D3 from 'd3';
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?