how to read local CSV file in Vue.js 3 using papa-parse

Question

what I wanna do is to read csv file(which is in my directory) in vue.js

what i tried first was

import Papa from "papaparse";
import csvFile from "../../../assets/files/mediList.csv";

 Papa.parse(csvFile, {
   download: true,
   encoding: "UTF-8",
  complete: function (results) {
    console.log(results);
   },
 });

and got errors

Module parse failed: Unexpected character '�' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

I got the same error when i only leave the code below

import csvFile from "../../../assets/files/mediList.csv";

I also tried to use fs module but failed as it is not node js.

what should I do to just read the local csv file that is located in the same directory?

score 0 · Answer 1 · answered Jul 20 '23 at 05:13

If you are using webpack, it will try to parse files imported in your vue files.

I recomend to use "PARSE REMOTE FILE" from papa parse docs:

Papa.parse("../../../assets/files/mediList.csv", {
    download: true,
    // rest of config ...
})

Another option is to have a specific folder for statics files (e.g. /public) where files inside will not be transformed, so you can refer to this folder in a realtive way.

how to read local CSV file in Vue.js 3 using papa-parse

1 Answers1