Import errors in Vue2 with Vite

[saschwarz]

When I use vite to for development of my Vue2 app using vuetensils the browser shows:

Uncaught SyntaxError: The requested module '/node_modules/.vite/vue.js?v=a69e11f1' does not provide an export named 'version'%

It is coming from files like VDrawer.vue where there is code like:

import { version } from 'vue';
...
const isVue3 = version && version.startsWith('3');

I didn't think you could import with destructuring in Vue2 from vue?

I'm wondering if the approach taken by vue-demi and setting a computed field in the classes might work?
https://github.com/vueuse/vue-demi/blob/master/lib/index.iife.js#L6

[saschwarz]

Sorry. I just saw there was already an issue for this problem: #127
Though maybe using the approach vue-demi uses would be a light weight solution.

[AustinGil]

Hey @saschwarz, thanks for participating. You're right that there is a warning from Vuetensils. The issue was introduced by adding support for both Vue 2 and Vue 3.

I've thought about this issue for a while and don't have a good solution. I even submitted an issue about it on the core library, but they rejected the idea of adding a version.

Adding vue-demi is one option, but Vuetensils currently doesn't have any dependencies, and I'd like to keep it that way. This might be an exception, but for the time being, I've been avoiding it.

I looked through the vue-demi source code, and just saw a bunch of black magic going on. Anthony is a wizard. Unfortunately, what I came across was beyond my abilities. The file that you linked to looks like it's for the version of vue-demi designed to be loaded via <script> tag. So I'm not sure it would work.

But maybe it will. I can give it another shot. Or if you have the time and interest, I'd love some help on this.

[saschwarz]

Hey @AustinGil,

Well you clearly know more than I do! I thought vue-demi figured out its behavior at runtime, it looks like you need to declare at compile time what vue runtime you are using(?).

Unfortunately, for vite and vue2 it isn't just a warning, it's an error. So I had to install vutensils@0.8 for my app to run with vuetensils.

I don't have a better solution than maintaining branches for each version with the hope that vue2 usage dwindles... not ideal for a single dev project 😢 .

[AustinGil]

Yeah. That's unfortunate, and not a solution thats good enough for me. I've tested Vue 2 and Vue 3, but I guess I need to test with Vite. Until now it's just been a warning which I figured was good enough. Ill take a look

[saschwarz]

@AustinGil I think I have a solution. Keep using your isVue3 boolean to separate the differences between versions in one code base but publish two packages.

In the code instead of:

import { version } from 'vue';
const isVue3 = version && version.startsWith('3');

You'd have:

const isVue3 = true

So your default build/packaging would build the Vue3 library.
Then run a second build that grep's the code for that string and replaces it with:

const isVue3 = false

and builds/packages/publishes the Vue2 library.

So no human effort is required once you have that prebuild script.

[AustinGil]

This is actually a pretty elegant solution. I think defining this as a command line env variable is also a good option. Thank for thinking about this. I'll have to give it a try :)

[AustinGil]

FYI, I know this issue is closed, but I think it should be resolved in the latest release