aurogpt
aurogpt

Reputation: 61

DOMException: error using PapaParse in react project

import csvData from "./data/normal.csv";

useEffect(() => {
    (async () => {
      const response = await fetch(csvData);
      const data = await response.text();
      console.log({ data });
      parseCsv(data);
    })();
    parseCsv(csvData);
  }, []);
  const parseCsv = (dataCsv) => {
    Papa.parse(dataCsv, {
      header: true,
      download: true,
      worker: true,
      dynamicTyping: true,
      complete: function (results, file) {
        console.log(results, file);
      },
    });
  };

Error-----------> enter image description here

Also tried this.....

const parseCsv = (csvData) => {
Papa.parse(csvData, {
  header: true,
  download: true,
  worker: true,
  dynamicTyping: true,
  complete: function (results, file) {
    console.log(results, file);
  },
});

};

according to the docs and some exaples online i should be getting a parsed csv file in JSON ormat in the results, but i am unable to debug this error. have also tried directly passing the path in the fetch function, also tried passing the path directly in the Papa.parse(file,config). i am receiving a sting obj with all the data in the console.log. idk, i am just floundering about now.

Upvotes: 0

Views: 147

Answers (1)

Dipanshu Tyagi
Dipanshu Tyagi

Reputation: 1

The error in the code is that the csvData variable is not a valid URL. The fetch() function expects a valid URL, but csvData is a path to a file on your local machine. To fix this, you can use the file: protocol to specify the path to the file on your local machine.or you can use third party libiary papaparse to read the csv file

The image you sent me shows the error message Uncaught DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL. This error message means that the XMLHttpRequest object was unable to open the URL specified in the csvData variable. The most likely reason for this error is that the csvData variable is not a valid URL.

Upvotes: 0

Related Questions