search

twickstrom / vue-papa-parse

VueJS PapaParse Plugin
MIT License
16 stars 10 forks source link

"Parse" function missing after build: `this.$papa.parse is not a function` #7

Closed marguerrrite closed 2 years ago

marguerrrite commented 2 years ago

Overview I am putting together a site utilizing Vue 3, Vite, and reading a local CSV with vue-papa-parse:

The site reads and loads CSV data when running locally.

After running npm build and viewing the built site, the console is throwing this this.$papa.parse is not a function error. image I am able to log the function itself but it is only showing me dedupe and download. I'm wondering if I am missing a dependency somewhere.

Chart component utilizing this.$papa.parse: MassShootingPlot.vue

Registration of library main.js.

To Reproduce Steps to reproduce the behavior:

  1. Pull repo and install (instructions in ReadMe)
  2. To view locally, run npm run dev, navigate to http://localhost:3000/ to view charts
  3. Build the site with npm run build
  4. View built site npm run preview, navigate to http://localhost:8888/
  5. See error above in browser console and blank chart

Expected behavior this.$papa.parse... to load CSV data successfully, like on localhost: image

I'm not sure why the .parse function is missing.

Desktop (please complete the following information):

twickstrom commented 2 years ago

I am able to reproduce this issue on multiple projects. I am resolving now.

twickstrom commented 2 years ago

@margueriteroth thank you for reporting this issue.

I have now resolved the issue with vue-papa-parse version 3.1.0

I have tested this on your project as well.

I also have a couple of recommendations: First for your .csv files. I would move those static assets to the public folder by moving the data folder from src to public and then update the path to all referenced URLs.

That way when changing: localDataUrl: "src/data/noaa-data.csv", to localDataUrl: "data/noaa-data.csv", will always resolve when running in both dev and prod.

Love your project, keep up the hard work and keep fighting the good fight!

PS Sorry this project caused you a snag.

-TW

marguerrrite commented 2 years ago

@twickstrom

Thank you so much! Works like a charm — https://vue-d3-dataviz-starter.netlify.app/

(And moved /data/ to the public folder. Time to fully embrace the public folder 😊.)