webpack-plugin-vuetify not work with webpack 5

[haha912]

I try to migrate my project from vue2 to vue3, but autoImport not work vue3 + vuetify 3 + typescript + webpack

plugins/vuetify.ts

import { createVuetify } from 'vuetify';
// import * as directives from 'vuetify/directives';
// import * as components from 'vuetify/components';

export default createVuetify({
  // directives,
  // components,
  // Global configuration
  defaults: {
    global: {
      ripple: false, // default no ripple for all components that support it
    },
  },
});

vue.config.js

const TerserPlugin = require('terser-webpack-plugin');
const { VuetifyPlugin } = require('webpack-plugin-vuetify');
module.exports = {
  publicPath: './',
  transpileDependencies: [
    'vuetify',
    'vuex-module-decorators',
    'pinia',
  ],
  configureWebpack: config => {
    config.plugins.push(
      new VuetifyPlugin({
        autoImport: true,
        styles: { configFile: 'src/scss/settings.scss' },
      }),
    );
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new TerserPlugin({
          terserOptions: {
            output: {
              comments: false,
            },
          },
        }),
      );
    }
  },
};

package.json

  "dependencies": {
    "@formatjs/intl": "2.6.3",
    "@formatjs/intl-datetimeformat": "5.0.2",
    "@formatjs/intl-locale": "3.0.11",
    "@formatjs/intl-numberformat": "7.4.3",
    "intl-pluralrules": "1.3.1",
    "@huawei/h5pro-basic-lib": "0.9.5",
    "@huawei/h5pro-health-engine": "0.9.7",
    "@huawei/h5pro-native-mocker": "^1.1.0",
    "@huawei/h5pro-runtime": "0.4.4",
    "axios": "0.27.2",
    "core-js": "3.25.0",
    "intersection-observer": "0.12.2",
    "vconsole": "^3.4.1",
    "vue": "3.2.39",
    "vue-i18n": "9.2.2",
    "vue-router": "4.1.5",
    "vuetify": "3.1.5",
    "vuex": "4.0.2",
    "pinia": "2.0.22"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@huawei/h5pro-cli": "^0.4.2",
    "@nce/eslint-config-nce": "^1.2.10",
    "@types/jest": "^27.0.2",
    "@typescript-eslint/eslint-plugin": "5.0.0",
    "@vue/cli-plugin-babel": "^5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-plugin-router": "^5.0.8",
    "@vue/cli-plugin-typescript": "^5.0.8",
    "@vue/cli-plugin-vuex": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/compiler-sfc": "^3.1.1",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/test-utils": "^2.3.0",
    "@vue/tsconfig": "^0.1.3",
    "@vue/vue3-jest": "27.0.0",
    "babel-core": "^7.0.0-bridge.0",
    "babel-plugin-transform-require-context": "^0.1.1",
    "eslint": "7.32.0",
    "esm": "^3.2.25",
    "jest": "^27.3.1",
    "jest-canvas-mock": "^2.4.0",
    "jest-html-reporter": "^3.4.2",
    "jest-transform-stub": "^2.0.0",
    "jsdom": "^19.0.0",
    "lint-staged": "^9.5.0",
    "sass": "^1.32.8",
    "sass-loader": "^10.0.0",
    "ts-jest": "^27.1.4",
    "ts-node": "^10.3.0",
    "typescript": "^4.9.5",
    "vue-cli-plugin-vuetify": "~2.2.0",
    "vue-loader": "17.0.1",
    "vue-demi": "^0.13.1",
    "terser-webpack-plugin": "^5.3.6",
    "vue-facing-decorator": "2.1.14",
    "vuex-module-decorators": "2.0.0",
    "webpack-plugin-vuetify": "^2.0.1"
  },

error:

runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: Failed to resolve component: v-card
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <HelloWorld msg="new msg" > 
  at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key=0 > 
  at <KeepAlive> 
  at <RouterView> 
  at <App>

[haha912]

this code can reproduct the problem on my local enviroment https://github.com/haha912/vue-zoshfb

[KaelWD]

Any reason you're using module: "commonjs"? It's causing the vuetify plugin to get const _component_v_card = (0, vue_1.resolveComponent)("v-card"); instead of const _component_v_card = _resolveComponent("v-card");

[haha912]

Any reason you're using module: "commonjs"? It's causing the vuetify plugin to get const _component_v_card = (0, vue_1.resolveComponent)("v-card"); instead of const _component_v_card = _resolveComponent("v-card");

Thank you very much，change module setting to ESNext can fix it. But I'm not sure if this will cause other compatibility issues.

[KaelWD]

If anything it'll work better, dead-code elimination only works with esm input.