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

It was because of vue-template-compiler. I figured out what dependency caused it being pulled into project and removed it.

npm list vue-template-compiler