When trying to parse a csv titled “dog.csv” using the papaparse parse function in my React component, I get the following error:

No overload matches this call.
The last overload gave the following error.
Argument of type ‘string’ is not assignable to parameter of type ‘unique symbol’.

csvString is of type string, and the papaparse documentation states that the function should be called on a string containing the csv data.

The Dog interface is defined earlier in the code in accordance to the heading information in the CSV file.

Below is the parse function that has the outlined error.

For simplicity, I am only trying to parse an arbitrary “dog” in the file (in this case, the dog on the second row) to use in the overall component.

const [selectedDog, setSelectedDog] = useState<Dog | null>(null);
const [error, setError] = useState<string | null>(null);

const parseStaticCSV = () => {
    fetch('/dog.csv')
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.text();
      })
      .then(csvString => {
        parse(csvString, {
          header: true,
          complete: (results) => {
            if (results.data && results.data.length > 1) {
              setSelectedDog(results.data[1] as Dog);
            } else {
              setError('Not enough data in CSV');
            }
          },
          error: (error: Papa.ParseError) => {
            setError(`PapaParse error: ${error.message}`);
          }
        });
      })
      .catch((fetchError: any) => {
        setError(`Fetch error: ${fetchError.message}`);
      });
  };