Error while using uppy with vue2 and Ruby on rails

[nanda2488payboy]

I'm using Ruby on Rails and Vue2 in my project.

In my Ruby on rails's application.html.erb,

<%= javascript_pack_tag 'dashboard', 'data-turbolinks-track': 'reload', defer: true %>

In my /views new.html.erb,

<% content_for(:breadcrumbs_title, "Form") %>

<div id="sample-uppy"></div>

My first entry of Vue component is like below in dashboard.js.

import Vue from 'vue';
import SampleUppy from "../forms/sample_uppy.vue";

document.addEventListener('DOMContentLoaded', () => {
  new Vue({ render: h => h(SampleUppy) }).$mount('#sample-uppy');
})

My Uppy component is like below in sample_uppy.vue (just like in Uppy Vue official doc):

<template>
    <dashboard :uppy="uppy" :plugins="['Webcam']" :props="{theme: 'light'}" />
</template>

<script>
import { Dashboard } from '@uppy/vue'

import '@uppy/core/dist/style.css'
import '@uppy/dashboard/dist/style.css'

import Uppy from '@uppy/core'
import Webcam from '@uppy/webcam'

export default {
  name: 'SampleUppy',
  components: {
    Dashboard
  },
  computed: {
    uppy: () => new Uppy().use(Webcam)
  },
  beforeDestroy () {
    this.uppy.close({ reason: 'unmount' })
  }
}
</script>

Then, I got below error in browser:

./node_modules/@uppy/vue/lib/dashboard.js 85:11-16
"export 'h' (imported as 'Vue') was not found in 'vue'

I got below errors in my terminal:

watch  | ERROR in ./node_modules/@uppy/vue/lib/dashboard.js 85:11-16
watch  | "export 'h' (imported as 'Vue') was not found in 'vue'
...
watch  | ERROR in ./node_modules/@uppy/vue/lib/dashboard-modal.js 100:11-16
watch  | "export 'h' (imported as 'Vue') was not found in 'vue'
...
watch  | ERROR in ./node_modules/@uppy/vue/lib/drag-drop.js 80:11-16
watch  | "export 'h' (imported as 'Vue') was not found in 'vue'
...
watch  | ERROR in ./node_modules/@uppy/vue/lib/progress-bar.js 77:11-16
watch  | "export 'h' (imported as 'Vue') was not found in 'vue'
...
watch  | ERROR in ./node_modules/@uppy/vue/lib/status-bar.js 80:11-16
watch  | "export 'h' (imported as 'Vue') was not found in 'vue'

Instead of having import SampleUppy from "../forms/sample_uppy.vue"; in dashboard.js, if I import my own vue component, it's working fine. The errors I have mentioned above come out as soon as i have import SampleUppy from "../forms/sample_uppy.vue"; in my code.

I have created new Vue2 project and tried Uppy. The Uppy is working fine there.

What am i doing wrong in my project? Any help would be much appreciated.

[aduh95]

It looks like the following "hack" is not working for you: https://github.com/transloadit/uppy/blob/5e38c83564a1e54939911c3a1249c897fc508fa3/packages/@uppy/vue/src/dashboard.js#L65-L77 https://github.com/transloadit/uppy/blob/58f996c0e481a8ad7932ebd1d544dd730986d973/packages/@uppy/vue/src/utils.js#L2-L4

Do you know why is that? Would you be able to modify the file from your node_modules folder to print out what's the content of args and paste it here?

[Murderlon]

@nanda2488payboy friendly ping

[Murderlon]

Closing this but we can continue the discussion if needed

[cgs]

I'm seeing this same exact issue in my Rails + Vue 2 app. There's nothing wrong with the logic / check for Vue 2 or 3. args[0] there is indeed a function. The error goes away if I comment out lines 75-77. It just won't compile b/c of Vue.h