React + TypeScript: useColumnNames producing an error that breaks the build

[Starlette]

Bug description useColumnNames is giving me the following error: Property 'useColumnNames' does not exist on type 'IDataParserOptions'.ts(2339) It doesn't break the site on local so I can see the graph generating but it does break the build so I can't run it on dev or prod.

This is my code

import React, { useEffect } from 'react';
import * as am4core from '@amcharts/amcharts4/core';
import * as am4charts from '@amcharts/amcharts4/charts';
import am4themes_animated from '@amcharts/amcharts4/themes/animated';
import { useStyles } from '@/hooks/useStyles';
import styles from '../index.module.scss';
import dynamic from 'next/dynamic';

am4core.useTheme(am4themes_animated);

interface Props extends React.HTMLAttributes<HTMLElement> {}

const HighGrowthFundsGraph: React.FC<Props> = ({ ...props }) => {
  const { className = '', ...atts } = props;
  const s = useStyles(styles);

  useEffect(() => {
    var chart = am4core.create('highGrowthFundsChart', am4charts.XYChart);

    am4core.options.autoSetClassName = true;
    am4core.useTheme(am4themes_animated);

    // Set up data source
    chart.dataSource.url = './graphs/High-Growth-May2023.csv';
    chart.dataSource.parser = new am4core.CSVParser();
    chart.dataSource.parser.options.useColumnNames = true; // gives error "Property 'useColumnNames' does not exist on type 'IDataParserOptions'.ts(2339)"

    // Create axes
    const categoryAxis = chart.xAxes.push(new am4charts.CategoryAxis());
    categoryAxis.dataFields.category = 'Year';
    categoryAxis.renderer.grid.template.location = 0;

    const valueAxis = chart.yAxes.push(new am4charts.ValueAxis());

    // Create series
    const series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = 'PHF';
    series.dataFields.categoryX = 'Year';
    series.name = 'Pure Hedge Fund';
    series.strokeWidth = 2;
    series.stroke = am4core.color('#40576F');
    series.fill = am4core.color('#40576F');
    series.tooltipText = '{categoryX}: [bold]{valueY}[/]';
    series.id = 'animateLine1';
    series.setClassName();

    const series2 = chart.series.push(new am4charts.LineSeries());
    series2.dataFields.valueY = 'SAMA';
    series2.dataFields.categoryX = 'Year';
    series2.name = 'SA Multi Asset - Low Equity Category';
    series2.strokeWidth = 2;
    series2.stroke = am4core.color('#700000');
    series2.fill = am4core.color('#700000');
    series2.tooltipText = '{categoryX}: [bold]{valueY}[/]';
    series2.id = 'animateLine2';
    series2.setClassName();

    const series3 = chart.series.push(new am4charts.LineSeries());
    series3.dataFields.valueY = 'CPI';
    series3.dataFields.categoryX = 'Year';
    series3.name = 'CPI';
    series3.strokeWidth = 2;
    series3.stroke = am4core.color('#bdc8c0');
    series3.fill = am4core.color('#bdc8c0');
    series3.tooltipText = '{categoryX}: [bold]{valueY}[/]';
    series3.id = 'animateLine3';
    series3.setClassName();

    // Add legend
    chart.legend = new am4charts.Legend();

    /* Create a cursor */
    chart.cursor = new am4charts.XYCursor();

    /* Number Formatter */
    chart.numberFormatter.numberFormat = '#.#';
  }, []);

  return (
    <div
      {...atts}
      className={`${s('graph-container')} ${className}`}
      id="highGrowthFundsChart"
    ></div>
  );
};

export default HighGrowthFundsGraph;

export const ChartHighGrowthFund = dynamic(
  () => import('@/components/graphs/high-growth-funds'),
  {
    ssr: false
  }
);

What I am using

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild": "next-sitemap",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@amcharts/amcharts4": "^4.10.36",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.4",
    "@reduxjs/toolkit": "^1.8.3",
    "dayjs": "^1.11.9",
    "gsap": "^3.11.3",
    "lottie-react": "^2.4.0",
    "lottie-web": "^5.12.2",
    "next": "^13.3.4",
    "next-sitemap": "^3.1.10",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.38.0",
    "react-markdown": "^8.0.7",
    "react-player": "^2.12.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.12.0",
    "react-toastify": "^9.0.8",
    "sass": "^1.53.0"
  },
  "devDependencies": {
    "@types/node": "18.0.3",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "eslint": "8.19.0",
    "eslint-config-next": "^13.3.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.7.1",
    "typescript": "4.7.4"
  }

[martynasma]

Try this:

(chart.dataSource.parser.options as am4core.ICSVOptions).useColumnNames = true;

[github-actions[bot]]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.