Error "export 'version' was not found in 'vue'

[stuartjnelson]

Bug

I get a console warning when using VFile. Error "export 'version' was not found in 'vue'

Setup

Component.vue

<template>
  <div class="styled">
    <VFile v-model="files" label="Files" />
    <p v-if="files.length">
      You've selected the file "{{ files[0].name }}" ({{ files[0].type }}). It
      was last modified
      {{ files[0].lastModifiedDate }}
    </p>
  </div>
</template>

<script>
// SomeComponent.vue
import { VFile } from 'vuetensils/src/components';

export default {
  components: {
    VFile,
  },
  data: () => ({
    files: [],
  }),
};
</script>

package.json

{
  ...
  "dependencies": {
    "@carbon/layout": "^10.29.0",
    "@carbon/vue": "^2.39.0",
    "axios": "^0.21.1",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuelidate": "^0.7.6",
    "vuetensils": "^0.8.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "css-loader": "^3.6.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "^1.36.0",
    "sass-loader": "^10.2.0",
    "vue-template-compiler": "^2.6.11"
  }
  ...
  }

Steps to recreate

• Installed Vuetensils 0.9.*
• Run npm run serve
• Get console warning Error "export 'version' was not found in 'vue'

Posible causes

• When I changed to using Vuetensils 0.8.0 the warning disappeared
• It persisted across any Vuetensils component
• Inside my component I checked for the version on the Vue instance and it was undefined. I think it could be something to do with this line (const isVue3 = version && version.startsWith('3');)[https://github.com/AustinGil/Vuetensils/blob/4dc05886f1c8b15a5ee4015f67df468e69f8846d/src/components/VFile/VFile.vue#L61]. This repo is legacy and has a few dependencies so it could also be one of those conflicting.

[AustinGil]

Hey @stuartjnelson, thanks for reporting this. It's actually a known issue. Im working on supporting both Vue 2 and Vue 3. There are only some minor changes, but in order to address them, I need to detect which version of Vue is running. The good news is that this won't negatively affect anything. The bad news is I dont know of a better way to detect what version is running.

[stuartjnelson]

Hey @AustinGil,

Thanks for quick reply and sorry if this was already reported. Do I had a play around (by this I mean hacking Vuetensils from inside my node_modules directory). I was able to check if it was Vue 2 by doing the following;

const isVue3 = this.render  === 'function' || false

This only worked if it was done inside the exported object not where you have it nicely at the top. I wonder if this would cause issues if you use Composition API plugin with Vue 2...

[AustinGil]

Oh that's a pretty clever approach. I was also considering modifying the code so its more like

import * as namedExports from 'vue'

const isVue3 = namedExports && namedExports.version && namedExports.version.startsWith('3')

It's a bit more verbose, but I think that should work. I just wonder if it would impact the bundle size differently.

[stuartjnelson]

I feel it not a bad verbose though but like you said for this check you wouldn't want to affect bundle size. Let me know if I can help with this

[AustinGil]

Unfortunately, the solution above does not work. Back to the drawing board. I'd like to avoid something withing the component, but may end up with your solution.

[AustinGil]

Ended up just adopting vue-demi as it's the recommended solution from the core team. I didnt want to add an external dependency, but fixing this issue was required for Vite support