I've been working on migrating my vue2 application to Vue3 using the Migration Build. I diligently followed the steps outlined in the documentation available at https://v3-migration.vuejs.org/migration-build.html, but despite that, I still keep encountering the following warning:
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, EffectScope, Fragment, KeepAlive, ReactiveEffect, Static,
Suspense, Teleport, Text, Transition, TransitionGroup, VueElement, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createElementBlock, createElementVNode, createHydrationRenderer, createPropsRestProxy, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineCustomElement, defineEmits, defi...
In browsing through several Stack Overflow posts, I noticed similar errors when individuals attempt to integrate vue2 components with vue 3. However, I presumed that I could utilize Vue.extend in compatibility mode and gradually transition each component to utilize defineComponent, thereby switching compat mode from 2 to 3.
My assumption was that there would be some form of a warning during this process, but upon running the application, I encountered an error indicating that extend is not defined on Vue:
Uncaught TypeError: Cannot read properties of undefined (reading 'extend')
at ./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/pages/about/App.vue?vue&type=script&lang=ts (App.vue?8f12:10:16)
...
To adhere to the recommendations provided in the documentation, I configured the compiler settings within the vue CLI to default to version 2:
chainWebpack: (config) => {
config.resolve.alias.set("vue", "@vue/compat");
...
Furthermore, I established a shims-vue-compat.d.ts file in the root directory of my source code:
declare module "vue" {
import { CompatVue } from "@vue/runtime-dom";
const Vue: CompatVue;
export default Vue;
export * from "@vue/runtime-dom";
const { configureCompat } = Vue;
export { configureCompat };
}
Despite these efforts, both with and without the existing shim.vue.d.ts file designed for vue 2, I'm still facing challenges. Could it be that I am overlooking a simple detail or perhaps misunderstanding the purpose of the migration build entirely? Is TypeScript compatibility posing issues, and should I convert all Vue.extend calls to defineComponent at once? Are there alternative approaches to ease this transition besides Vue.extend?
If possible, I would greatly appreciate any assistance, particularly if someone can provide guidance on converting a typical vue 2 TypeScript application to vue 3, as resources seem scarce in this specific context.
Thank you in advance for your help.