Vue2 Vite prod boundle not working

[matutorm]

Hello, I am migrating Vue2 application from Webpack to Vite and I am facing errors in production boundle. Build finish with no errors, but when I run it in Chrome, all inherited functionality from parent component do not work.

For example I have Vue.directive('dataTestAttr', dataTestAttr) and when I build component without property-decoration this directive works as it should, but when I use property-decoration I get Failed to resolve directive: data-test-attr error, same thing happens when I try to extend another component instead of Vue, all inherited methods doesnt work and I get Error in v-on handler: "TypeError: e.myMethod is not a function" ...

Am I doing something wrong or is there a known problem with the vite / rollup? Thank you!

Component

<script lang="ts">
import { Component,  Vue } from 'vue-property-decorator'

@Component({
  name: 'BaseInput',
})
export default class BaseInput extends Vue{
}
</script>

<template>
  <div v-data-test-attr="{ value: `test` }" class="base-image">
    Test
  </div>
</template>

Vite.config.js

import vue from '@vitejs/plugin-vue2'

const path = require('path')

export default {
  resolve:{
    alias:{
      '@' : path.resolve(__dirname, './src')
    },
  },
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/scss/app.scss";`
      }
    }
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.ts'),
      name: 'TestPackage',
      fileName: (format) => `test-package-ui.${format}.js`,
      sourcemap: true,
    },
    rollupOptions: {
      external: ['vue', 'vue-class-component', 'vue-property-decorator'],
      output: {
        globals: {
          vue: 'Vue',
          'vue-class-component': 'vue-class-component',
          'vue-property-decorator': 'vue-property-decorator',
        },
      }
    }
  }
}

Package.json

"devDependencies": {
    "@babel/plugin-proposal-class-properties": "7.18.6",
    "@babel/plugin-proposal-decorators": "^7.20.7",
    "@storybook/addon-essentials": "7.0.0-beta.19",
    "@storybook/addon-interactions": "7.0.0-beta.19",
    "@storybook/addon-jest": "7.0.0-beta.19",
    "@storybook/addon-links": "7.0.0-beta.19",
    "@storybook/blocks": "7.0.0-beta.19",
    "@storybook/testing-library": "0.0.13",
    "@storybook/vue": "7.0.0-beta.19",
    "@storybook/vue-vite": "7.0.0-beta.19",
    "@types/jest": "27.4.1",
    "@vue/vue2-jest": "27.0.0-alpha.4",
    "jest": "27.5.1",
    "jest-serializer-vue": "2.0.2",
    "jest-transform-stub": "2.0.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "sass": "1.57.1",
    "storybook": "7.0.0-beta.19",
    "svg-sprite": "1.5.4",
    "svg-sprite-loader": "6.0.11",
    "svgo-loader": "3.0.0",
    "ts-jest": "27.1.3"
  },
  "dependencies": {
    "@babel/core": "7.20.7",
    "@faker-js/faker": "7.6.0",
    "@googlemaps/js-api-loader": "1.14.3",
    "@vitejs/plugin-vue2": "2.2.0",
    "@vue/test-utils": "1.3.3",
    "css-loader": "6.7.3",
    "dayjs": "1.11.5",
    "dompurify": "2.3.12",
    "i": "0.3.7",
    "marked": "4.0.17",
    "npm": "9.2.0",
    "sass-loader": "13.2.0",
    "scss-loader": "0.0.1",
    "storybook-design-token": "2.8.2",
    "style-loader": "3.3.1",
    "turndown": "7.1.1",
    "typescript": "4.9.4",
    "vee-validate": "3.4.14",
    "vite": "4.0.4",
    "vue": "2.7.14",
    "vue-class-component": "7.2.6",
    "vue-cropper": "0.5.8",
    "vue-i18n": "8.27.2",
    "vue-property-decorator": "9.1.2",
    "vue2-datepicker": "3.10.4",
    "vuedraggable": "2.24.3"
  }

[matutorm]

Any idea how to solve this? 👀

[lukaslaskovski]

Try removing the property-decorator package from the external option. I have a similar setup and it works fine, except that I keep the decorator in the build.