$listeners is readonly. $attrs is readonly.

[mgorunuch]

Hello. I have an error when using vue-property-decorator in my additional library.

From this stackoverflow answer. Vue is being loaded/packed into the bundle by webpack and also loaded externally (not via webpack)
https://stackoverflow.com/a/50932919/5988531

I do something like this in my main.ts:

import MyIcon from '<my-external-library>/src/components/icon/icon.vue';
Vue.component('my-icon', MyIcon);

Then, I use my-icon in the project and got an error.

Do you have any comments or suggestions for this?

P.S. I think this is because We need to extend Vue class in *.vue file. Can I use property decorators without extending a Vue instance?

[kaorun343]

@Mgorunuch

Hi.

How do you import Vue in main.ts ?

[mgorunuch]

@kaorun343

import Vue from 'vue'

[jarekcieslak]

Any news on that?

[johannes-z]

@kaorun343 I get the same error. As soon as I use the default object notation export default { ... } I don't get any errors.

When I use export default class PropertyPane extends Vue {...} I get those errors.

[jarekcieslak]

I dont remember exactly but in my case it was because I was instantiating two instances of Vue. After I externalised vue during the build process everything worked fine.

I used rollup.js in my build process and in order to do that I added that to the build config:

  external: [
    "vue-property-decorator",
    "vue"
    // list external dependencies, exactly the way it is written in the import statement.
    // eg. 'jquery'
  ],

I'm guessing that webpack has something similar.

[mareczek]

I dont remember exactly but in my case it was because I was instantiating two instances of Vue. After I externalised vue during the build process everything worked fine.

Hi Jarek,

If you don't mind me asking: what do you have in mind when writing externalizing. Is this something to define in package.js when creating a lib for vue, or is it something to define when importing a component to a project? (or something totally different? ;) )

[jarekcieslak]

Sure. So by saying that the library is marked as external, you tell webpack/rollup not to bundle it together with the rest of js files, even if the library is referenced from js files.

You push the responsibility of providing this library (eg. vue-property-decorator) to the application consuming your library. I was using rollup in my project. Everything described in more verbose way here: https://rollupjs.org/guide/en#peer-dependencies, and I see that webpack has something similar: https://webpack.js.org/configuration/externals/

[Naartti]

Hi, any news on this? I'm having the same issue and it didn't help with externalizing vue and vue-property-decorator in neither rollup nor webpack. I can see that the bundle size is very small for a simple example component so Vue is externalized, but the errors persist.

As @johannes-z mentions, it works for the default export default { ... } but not with @Component export default class SimpleComponent extends Vue {}. It does not work with export default Vue.extends({}) either.

[Naartti]

Oh, never mind - found the problem for me. It turned out that the project importing my component had imported Vue twice (due to some codesplitting & lazy loading). The quick fix was to import Vue via CDN, but later changed it to just import it once.

[kiven01]

Hi, I have the same issue. I use Vue+Vuetify. How can I import them with CDN ?

[alamhubb]

+1

I customized a component and introduced it into the project in the form of link npm, which triggered this error

<template>
  <div>
    <slot></slot>
  </div>
</template>

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

@Component
export default class TestDiv extends Vue {

}

</script>

{
  "name": "YComponent",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "pinyin-match": "^1.1.8",
    "element-ui": "^2.13.1"
  },
  "devDependencies": {
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^9.1.2",
    "ts-node": "^10.7.0",
    "tslib": "^2.4.0",
    "typescript": "4.6.3",
    "vue-template-compiler": "2.7.10"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

"YComponent": "../YComponent"