charts: 'Chart is not a constructor' when importing as ES6 module

You need to import the EcmaScript module straight from the dist folder:

import { Chart } from 'frappe-charts/dist/frappe-charts.esm.js'

cc @deligent-ant @maulerjan @panjizhi

@scmmishra in the next major version, will there just be a hybrid import which combines ESM/CommonJS (like most NPM packages)? This way users can just do:

// In ESM environments:
import { Chart } from 'frappe-charts';

// In CJS environments:
const { Chart } = require('frappe-charts');

This would be great, so that developers don’t need to worry about digging into the /dist/ folder to find the file that they need.

I’ve switched to use https://github.com/apexcharts/apexcharts.js and https://github.com/gionkunz/chartist-js as this project seems to be abandoned and unmaintained per #293.

@andreasvirkus It works for me but now it is showing a different error.

Error: No parent element to render on was provided

here’s what works for me using frappe-charts version 1.1.0

import Chart from "../node_modules/frappe-charts/dist/frappe-charts.min.esm.js";
...
new Chart(...)
...

I use browser native ES modules, source: https://github.com/GrosSacASac/graphs navigate to js/main.js to see complete usage

@scmmishra in the next major version, will there just be a hybrid import which combines ESM/CommonJS (like most NPM packages)? This way users can just do:

// In ESM environments:
import { Chart } from 'frappe-charts';

// In CJS environments:
const { Chart } = require('frappe-charts');

This would be great, so that developers don’t need to worry about digging into the /dist/ folder to find the file that they need.

Yess, this will make life simpler for all of us. I’ll have this implemented soon.

Thanks

import { Chart } from "frappe-charts/dist/frappe-charts.esm.js";

Is the correct way for importing Frappe Charts

Hey @niftylettuce sorry you had a bad experience with frappe-charts.

Charts enjoys a niche in small projects and many devs love it from the simplicity. Apex charts is a great library. I still maintain Frappe Charts, however not full time, The larger focus of our small team is on Frappe Framework and ERPNext.

There is a major version overhaul in the pipeline which solves a lot of problems. I would love for you to give it a try once it’s released.

I’m having a similar issue in my svelte-frappe-charts repo. It’s very unclear why it isn’t working, and I want to rule out Svelte itself, but it seems to be a similar Error: No parent element to render on was provided issue.