uppy: "export 'h' (imported as 'Vue') was not found in 'vue'" on several files

I implemented uppy as described on the uppy/vue documentation page but without the webcam plugin like this:

<template>
  <div>
    <dashboard :uppy="uppy" />
  </div>
</template>

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

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

import Uppy from '@uppy/core'

export default {
  components: {
    Dashboard
  },
  computed: {
    uppy: () => new Uppy()
  },
  beforeDestroy () {
    this.uppy.close()
  }
}
</script>

I use storybook on the project to work on components isolated and everything seems to work fine on the frontend. But the webpack build gives me warnings that vue was not found on several files.

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

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

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

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

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

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 5
Comments: 17 (10 by maintainers)

Most upvoted comments

@shidcordero @kyrylo93, you guys found a workaround on this?

erubielct on Aug 9, 2021

any update on this? I am getting this warning in my nuxt app

shidcordero on Jun 16, 2021

Okay I created a new utility and put that to use in all of the Vue components. The code looks something like this:

// Slight inconvenience because Webpack with Vue 2 was too smart for it's own good
const getH = () => 'h'

// Hack to support Vue 2 & 3
export const h = (...args) => {
  if (isVue2(...args)) {
    // If we're using Vue 2, return the first arg
    return args[0]
  }
  // Otherwise, return `Vue.h`
  return Vue[getH()]
}

And usage in the components looks like this:

render (...args) {
  // Hack to allow support for Vue 2 and 3
  const createElement = h(...args)
  return createElement('div', {
    ref: 'container',
  })
}

This makes the rendering code simpler to read and edit. I think this is a decent solution to the problem; I can open a pull request, if this solution is okay with y’all and @arturi

ajkachnic on May 10, 2021

Okay so following the solution I previously put forward did not end well. However, the error is mitigated by doing something like:

return Vue[String.fromCharCode(104)]('div', {
  ref: 'container',
})

The String.fromCharCode(104) part generates the string "h", and Webpack doesn’t check if it’s undefined.

That was my first attempt at this, but then I realized that something as simple as this would work:

// defined at top level
const h = () => 'h'
// In the render function
return Vue[h()]('div', {
  ref: 'container',
})

This is much easier to read, and definitely better than my first attempt. For some reason I figured Webpack would be able to figure out that h was a pure function with no args and still do export checks.

That solution works, but I think the better way to handle this would be to extract all of the logic for getting the correct h function into a utility and then use that in all of the Vue components. That way, future changes are easier to make

ajkachnic on May 10, 2021