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

[may17]

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'

[JBrognoli]

Same here

[ajkachnic]

This is just a caveat of how we support both Vue 2 and 3. I had thought that there wouldn't be a warning at all for Vue 2, but apparently Webpack picks up that something is awry.

The way support both versions is by checking the version of Vue at runtime and adjusting rendering accordingly. However, this means that static analysis tools will give warnings. Here's the relevant section of code:

// Hack to allow support for Vue 2 and 3
if (isVue2(...args)) {
  // If it's first argument is a function, then it's a Vue 2 App
  const [createElement] = args
  return createElement('div', {
    ref: 'container',
  })
}

    // Otherwise, we use the `h` function from the Vue package (in Vue 3 fashion)
return Vue.h('div', {
  ref: 'container',
})

I don't think there's a great way of fixing this (unless someone else has any ideas). Just to verify, the code still runs fine, right?

[JBrognoli]

yea, it works properly

[may17]

Yes it works but its hard to debug with all those warnings in the terminal and build pipelines could fail depending on there configured tolerance level.

[ajkachnic]

I understand the concern, but this is also a difficult issue to fix without affecting support for either version. I have a few ideas, and I'll update this accordingly depending on whether or not they work

I think the simplest fix is to do something like:

// snip
return Vue['h']('div', {
  ref: 'container'
})

Since that makes static analysis harder for webpack, and hopefully that is enough (although depending on how modules are handled, this could also break Vue 3)

I'll also do some research to see if there is some sort of flag we could use to disable this warning for that line of code

[ajkachnic]

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]

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

[arturi]

@goto-bus-stop could you weigh in here, please? since it’s build tool related, I wonder if you have thought on whether this hack is a good idea or might bite us in the future.

[Murderlon]

@ajkachnic I'm not sure if it solves the same problem but I found vue-demi, which might be helpful?

[ajkachnic]

It's supposed to solve the same problem, but we tried it before and it didn't work very well. I think it's supposed to be used by things like hooks that don't have a UI (or at least that's the impression that I get).

[Murderlon]

Alright! Your latest code snippet looks okay but I'm not into bundlers enough to foresee any issues.

[shidcordero]

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

[kyrylo93]

same error (

[erubielct]

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

[KareemDa]

It's July 2022, any plans to fix this warning ?

[Murderlon]

@KareemDa AFAIK this is fixed in Uppy 3.0, which currently has beta releases and a stable release is imminent.

[Murderlon]

Can confirm this is fixed and the example has been updated (#3774)