“TS2339：与汇总捆绑在一起时，类型‘Vue’上不存在属性‘XX’”

Question

I have a Vue/TypeScript class that calls a public method on another Vue/TypeScript class. It compiles and runs fine with tsc or WebPack. But when compiling with rollup and the rollup-plugin-vue, I get an error that Property 'close' does not exist on type 'Vue'.

Repro link: https://repl.it/@orobert91/PropertyDoesNotExistOnTypeVue

Popover.vue:

import { Component } from "vue-property-decorator";
import Vue from "vue";

@Component
export default class Popover extends Vue {
    public close() {
        this.isShown = false;
    }
}

DatePicker.vue:

import Popover from "components/commonControls/Popover.vue";
import { Component } from "vue-property-decorator";
import Vue from "vue";

@Component
export default class DatePicker extends Vue {

    public $refs!: {
        popover: Popover
    }

    public get myMethod() {
        this.$refs.popover.close(); //COMPILATION ERROR HERE
    }
}

tsconfig.json configuration file:

{
    "compilerOptions": {
        "noImplicitAny": true,
        "module": "es6",
        "target": "es6",
        "jsx": "react",
        "jsxFactory": "h",
        "strict": true,
        "experimentalDecorators": true,
        "esModuleInterop": true,
        "moduleResolution": "node",
        "declaration": true,
        "declarationDir": "./dist",
        "baseUrl": "./src",
        "outDir": "./dist",
        "plugins": [
            { "transform": "typescript-transform-paths" },
            { "transform": "typescript-transform-paths", "afterDeclarations": true }
        ]
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}

rollup.config.js configuration file:

import vue from 'rollup-plugin-vue';
import resolve from 'rollup-plugin-node-resolve';
import cleaner from 'rollup-plugin-cleaner';
import copy from 'rollup-plugin-copy';
import ttypescript from 'ttypescript'
import tsPlugin from 'rollup-plugin-typescript2'

export default {
    input: 'src/index.ts',
    output: {
        format: 'esm',
        file: 'dist/index.js'
    },
    external: ['vue'],
    plugins: [
        resolve(),
        tsPlugin({
            typescript: ttypescript
        }),
        vue(),
        cleaner({
            targets: [
                './dist/'
            ]
        }),
        copy({
            targets: [
              { src: 'src/laravel-mix', dest: 'dist/' },
            ]
        })
    ]
};

Answer 1

I think you may be having this issue because you didn't register the Popover component in your Datepicker.vue component

Also, another possible reason for the error could be that you are using this snippet below to tell typescript not to throw an error when using this.$refs.popover.

 public $refs:: { popover: Popover }

Maybe instead of this.popover.close() , you meant to write this.$refs.popover.close() ?

Try this

Datepicker.vue

 @Component({ components: { Popover } }) export default class DatePicker extends Vue { public $refs:: { popover. Popover } public get myMethod() { this.$refs.popover;close(); //using refs to access the DOM directly } }