Syntax Error: TypeError: Cannot read properties of undefined (reading 'styles') When migrating to Vue3

I am currently trying to migrate from Vue2 to Vue3 using migration build. When I try to build the project, the following error occurs:

Syntax Error: TypeError: Cannot read properties of undefined (reading 'styles')

The following is from my project's package.json file:

"dependencies": { "@game-streaming/game-streaming-vue-body-class-configure": "*", "@vue/compat": "^3.1.0", "vue": "^3.1.0", "vue-loader": "^16.0.0" }, "devDependencies": { "@game-streaming/eslint-config-game-streaming": "*", "@types/node": "^17.0.17", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-plugin-typescript": "~5.0.0", "@vue/cli-service": "~5.0.0", "@vue/compiler-sfc": "^3.5.12", "@vue/eslint-config-typescript": "^9.1.0", "eslint-plugin-vue": "^9.9.0", "ts-node": "^10.9.1", "typescript": "~4.5.5" }, 

and my vue.config.js:

module.exports = { configureWebpack: { resolve: { alias: { // eslint-disable-next-line global-require,@typescript-eslint/no-var-requires '@': require('path').join(__dirname, 'src'), }, }, module: { rules: [ { test: /\.vue$/, use: 'vue-loader', }, ], }, }, chainWebpack: (config) => { config.resolve.alias.set('vue', '@vue/compat'); config.module .rule('vue') .use('vue-loader') .tap((options) => ({ ...options, compilerOptions: { compatConfig: { MODE: 3, }, }, })); }, }; 

After some research, I am assuming it is related to using outdated vue-loader library(though not sure.) Help is much appreciated!

I tried using vue-loader v.16