Import issue: Module ‘”angular-charts”‘ has no exported member ‘CanvasJS’

[kkoroleva]

Hi, for some reason starting today (there was no problems in the last 3 months) my imports of the class CanvasJS won’t work in Angular project. Could you please help me to sort out why and how to fix it or a workaround?
I am importing it like that:

import {
  CanvasJS,
  CanvasJSAngularChartsModule,
} from '@canvasjs/angular-charts';

\

And then use it to create a container and rerender:

this.chart = new CanvasJS.Chart('chartContainer', {
      theme: ChartConstants.THEME,
      animationEnabled: true,
      options: {
        scales: {
          y: {
            stacked: true,
          },
        },
      },
      title: {
        text: '',
      },
      axisY: {
        title: '',
        suffix: '',
      },
      toolTip: {
        shared: 'true',
      },
      legend: {
        cursor: ChartConstants.CURSOR,
      },
      data: currentOptions,
    });
    this.chart.render();

Thanks in advance.

• This topic was modified 9 months, 1 week ago by kkoroleva.
• This topic was modified 9 months, 1 week ago by kkoroleva.
• This topic was modified 9 months, 1 week ago by kkoroleva.

[Ananya]

@kkoroleva,

You can import CanvasJS from @canvasjs/charts package directly in this case. Please find the code-snippet below.

import * as CanvasJS from '@canvasjs/charts';

Please check out CanvasJS npm package from this link.

—
Ananya Deka
Team CanvasJS

[kkoroleva]

@ananyadeka

Thank you for the answer. Unfortunately, it is not working. But now both modules doesn’t work. I have installed the latest versions of both and tried to reinstall all node modules and recreate package-lock

[Ananya]

@kkoroleva,

We don’t have CanvasJS Charts TypeScript definition as of now. However, charts seems to work fine with TypeScript as well. You can ignore the corresponding error by adding //@ts-ignore above the import statement as shown in the code-snippet below:

//@ts-ignore
import * as CanvasJS from '@canvasjs/charts';

—
Ananya Deka
Team CanvasJS

[sujeet]

Hi,

I am getting this warning after running the Angular 18 ng build command:

▲ [WARNING] Module '@canvasjs/charts' used by 'node_modules/@canvasjs/angular-charts/fesm2015/canvasjs-angular-charts.js' is not ESM

CommonJS or AMD dependencies can cause optimization bailouts.
For more information see: https://angular.dev/tools/cli/build#configuring-commonjs-dependencies

Could you please assist me with this issue?

[Vishwas R]

@sujeet,

You are getting this warning because angular-charts package uses CommonJS/AMD modules. You can suppress the warning by adding it to allowedCommonJsDependencies under build options in your angular.json file, as shown below:

"build": {
    "options": {
        "allowedCommonJsDependencies": [
            "@canvasjs/angular-charts"
        ],
        ...
    },
    ...
}

Please refer to this angular documentation for more information.

—
Vishwas R
Team CanvasJS