Vue 2 based , vue-cli, vue-property-decorator, vue-class-component, Vuetify, project migration to Vue 3 - vue.js

Question

I am working on project upgrade from Vue 2 to Vue 3. The code base changed according to Vue migration documents: https://v3-migration.vuejs.org/breaking-changes/introduction.html#overview. I have mismatch of above mentioned libraries. Does somebody has a running project and would share their working library versions
Current mismatch error is :
TypeError: Cannot read property 'NormalModule' of undefined
at VueLoaderPlugin.apply (C:[credentials]\app\node_modules\vue-loader-v16\dist\pluginWebpack5.js:44:47)
at webpack (C:[credentials]app\node_modules\#vue\cli-service\node_modules\webpack\lib\webpack.js:51:13)
at serve (C:[credentials]app\node_modules\#vue\cli-service\lib\commands\serve.js:163:22)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Package.json:
"scripts": {
"serve": "vue-cli-service serve",
"build": "npm run build:dashboard",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"build-storybook": "build-storybook",
"build:dashboard": "vue-cli-service build --dest $npm_package_config_dashboard src/main.ts",
"compile-typescript": "tsc",
"start": "node app.js",
"storybook": "start-storybook -p 6006",
"watch:tsc": "npx tsc --watch"
},
"dependencies": {
"#juggle/resize-observer": "^3.2.0",
"#popperjs/core": "2.4.4",
"#sentry/browser": "^5.28.0",
"#sentry/integrations": "^5.28.0",
"#sentry/tracing": "^5.28.0",
"#stripe/stripe-js": "^1.9.0",
"#types/lodash": "^4.14.161",
"#types/lodash-es": "^4.17.3",
"#vue/cli-service-global": "^4.5.15",
"bootstrap": "^4.6.1",
"chart.js": "3.0.0-beta.6",
"core-js": "^3.6.5",
"dayjs": "^1.8.36",
"jquery": "^3.5.1",
"lodash-es": "4.17.15",
"nouislider": "14.6.2",
"odometer": "0.4.8",
"patternomaly": "^1.3.2",
"posthog-js": "^1.7.0",
"register-service-worker": "^1.7.1",
"tippy.js": "^6.2.6",
"vue": "^3.2.20",
"vue-class-component": "^8.0.0-rc.1",
"vue-property-decorator": "^10.0.0-rc.3",
"vue-router": "^4.0.0-alpha.6",
"vue-shepherd": "0.2.1",
"vuetify": "^3.0.0-alpha.12",
"vuex": "^4.0.0-alpha.1",
"vuex-persist": "^2.3.0"
},
"devDependencies": {
"#storybook/addon-actions": "^6.2.9",
"#storybook/addon-essentials": "^6.2.9",
"#storybook/addon-knobs": "^6.2.9",
"#storybook/addon-links": "^6.2.9",
"#storybook/vue": "^6.2.9",
"#types/jest": "^26.0.23",
"#types/jquery": "^3.5.5",
"#types/node": "^12.12.62",
"#types/nouislider": "^9.0.5",
"#types/wnumb": "^1.2.0",
"#typescript-eslint/eslint-plugin": "^3.10.1",
"#typescript-eslint/parser": "^3.10.1",
"#vue/cli": "^4.5.13",
"#vue/cli-plugin-babel": "^4.5.12",
"#vue/cli-plugin-eslint": "^4.5.12",
"#vue/cli-plugin-pwa": "^4.5.12",
"#vue/cli-plugin-router": "^4.5.12",
"#vue/cli-plugin-typescript": "^4.5.12",
"#vue/cli-plugin-unit-jest": "^4.5.12",
"#vue/cli-plugin-vuex": "^4.5.15",
"#vue/cli-service": "^4.5.13",
"#vue/compiler-sfc": "^3.2.27",
"#vue/eslint-config-prettier": "^6.0.0",
"#vue/eslint-config-typescript": "^5.1.0",
"#vue/test-utils": "^2.0.0-alpha.1",
"css-loader": "^4.3.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-vue": "^7.0.0-alpha.0",
"eslint-watch": "^7.0.0",
"faker": "^5.1.0",
"fibers": "^5.0.0",
"husky": "^4.3.0",
"jest": "^26.4.2",
"lint-staged": "^10.4.0",
"node-sass": "^5.0.0",
"npm-run-all": "^4.1.5",
"prettier": "^2.1.2",
"prettier-eslint": "^11.0.0",
"react-is": "^16.13.1",
"sass": "^1.48.0",
"sass-loader": "^10.2.0",
"style-loader": "^1.2.1",
"stylelint": "^13.13.1",
"stylelint-config-prettier": "^8.0.2",
"stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.18.0",
"ts-jest": "^26.3.0",
"typescript": "^4.4.4",
"vue-cli-plugin-sass-resources-loader": "^1.0.0",
"vue-cli-plugin-vue-next": "~0.1.4",
"vue-cli-plugin-webpack-bundle-analyzer": "^2.0.0",
"vue-eslint-parser": "^7.1.0",
"vue-loader": "^15.9.1",
"vue-style-loader": "^4.1.3",
"watch": "^1.0.2",
"wnumb": "^1.2.0",
"babel-eslint": "^10.1.0"
},
"config": {
"dashboardprod": "../../wwwroot/dashboard",
"dashboard": "./dist"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx,vue,ts,tsx}": [
"vue-cli-service lint",
"git add"
],
"*.{scss,vue}": "stylelint"
}
}
Any and all advises are appreciated

Answer 1

My colleague solved it by moving to Vite. My suggestion would be to drop webpack and use Vite instead.
Migration guide for Vue 2 to 3 here: https://v3-migration.vuejs.org/
Vuetify migration guide: https://next.vuetifyjs.com/en/getting-started/upgrade-guide