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

• February 5, 2024 at 4:36 pm #44586
  
  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.
  February 5, 2024 at 6:30 pm #44591
  
  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

  February 6, 2024 at 10:02 am #44595
  
  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

  
  

  February 6, 2024 at 5:20 pm #44601
  
  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

  July 2, 2024 at 9:41 am #45394
  
  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?

  July 2, 2024 at 5:57 pm #45405
  
  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