Recently, I began the migration process using the migration guide and the Compat build to ensure a smoother transition. Here is how I have configured the vue.config.js:
chainWebpack: (config) => {
// Set alias for Vue compatibility build
config.resolve.alias.set('vue', '@vue/compat');
// Set other aliases
config.resolve.alias
.set('@common', path.resolve('src/common'))
.set('@', path.resolve('src/'));
// Add extensions
config.resolve.extensions
.merge(['.js', '.ts', '.tsx']);
// Modify vue-loader options
config.module
.rule('vue')
.use('vue-loader')
.tap((options) => {
return {
...options,
compilerOptions: {
compatConfig: {
MODE: 2,
},
},
};
});
},
I also made changes in my main.ts file:
createApp({
router,
i18n,
render: () =>
h(App, {
logo: '/img/sodra-logo.svg',
}),
}).mount('#app');
However, when running npm run serve, I encounter numerous errors that mostly revolve around messages like:
TS2339: Property '$t' does not exist on type 'HomePage'.
311 | {
312 | routeName: routeNameHomePage,
> 313 | name: this.$t('breadcrumbs.' + routeNameHomePage).toString(),
| ^^
314 | },
315 | ];
316 |
These errors seem to be related to various instances of this.$, including this.$route and this.$moment. I have researched if there have been any deprecations regarding the use of $ but couldn't find anything conclusive. It appears that some configuration might have been missed.
Here is an excerpt from my tsconfig.json file where a TypeScript error is being thrown:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"allowJs": true,
"baseUrl": ".",
"types": ["vite/client", "vue", "webpack-env", "jest"],
"paths": {
"@/*": ["src/*"],
"@common/*": ["src/common/*"]
},
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": ["node_modules"]
}