How to use with Vue 3 script setup?

[sajjadalis]

I'm getting this error. Uncaught TypeError: Cannot read properties of undefined (reading '$papa')

<script setup>
import { ref, onMounted } from "vue"

onMounted(() => {
    this.$papa.parse(file.value, {
    header: true,
    skipEmptyLines: true,
    complete: (results) => {
    content.value = results;
    parsed.value = true;
    },
    });
})
</script>

Tried importing VuePapaParse inside component but getting similar error. Uncaught TypeError: VuePapaParse.parse is not a function

Thanks

[SebastienD11]

I was facing the same issue. Vue-Papa-Parse does not provide the value $papa, and we cannot use this inside setup() with Vue3 composition API.

I found the "solution" within this topic: https://forum.vuejs.org/t/how-to-use-globalproperties-in-vue-3-setup-method/108387/4

Manually provide $papa from your main.ts

app.provide('$papa', app.config.globalProperties.$papa)

And in your component, inject it this way:

import { [...], inject } from "vue";
[...]
const $papa = inject("$papa");

[vanngoh]

An alternative way for this can be

<script setup>
import { ref, onMounted } from "vue"
import * as papa from "papaparse"

onMounted(() => {
    papa.parse(file.value, {
    header: true,
    skipEmptyLines: true,
    complete: (results) => {
    content.value = results;
    parsed.value = true;
    },
    });
})
</script>

Hope this helps! 🙌

[psgganesh]

@vanngoh your comment solves the issue, this issue can be closed 🙌🙏