Error: "Uncaught TypeError: can't access property "options", this.constructor is undefined" when using Vue 3

[jonesnc]

I'm submitting a ...

• bug report
• feature request
• support request

What is the current behavior?

When I try to use this component, I get this error:

Uncaught TypeError: can't access property "options", this.constructor is undefined
    handler es7.js:132
    callWithErrorHandling runtime-core.esm-bundler.js:154
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:163
    job runtime-core.esm-bundler.js:5285
    doWatch runtime-core.esm-bundler.js:5332
    watch runtime-core.esm-bundler.js:5198
    createWatcher runtime-core.esm-bundler.js:5757
    applyOptions runtime-core.esm-bundler.js:5601
    applyOptions runtime-core.esm-bundler.js:5599
    finishComponentSetup runtime-core.esm-bundler.js:6276
    setupStatefulComponent runtime-core.esm-bundler.js:6212
    setupComponent runtime-core.esm-bundler.js:6152
    mountComponent runtime-core.esm-bundler.js:4400
    processComponent runtime-core.esm-bundler.js:4376
    patch runtime-core.esm-bundler.js:3991
    mountChildren runtime-core.esm-bundler.js:4180
    processFragment runtime-core.esm-bundler.js:4339
    patch runtime-core.esm-bundler.js:3984
    componentEffect runtime-core.esm-bundler.js:4493
    reactiveEffect reactivity.esm-bundler.js:42
    effect reactivity.esm-bundler.js:17
    setupRenderEffect runtime-core.esm-bundler.js:4458
    mountComponent runtime-core.esm-bundler.js:4416
    processComponent runtime-core.esm-bundler.js:4376
    patch runtime-core.esm-bundler.js:3991
    componentEffect runtime-core.esm-bundler.js:4493
    reactiveEffect reactivity.esm-bundler.js:42
    effect reactivity.esm-bundler.js:17
    setupRenderEffect runtime-core.esm-bundler.js:4458
    mountComponent runtime-core.esm-bundler.js:4416
    processComponent runtime-core.esm-bundler.js:4376
    patch runtime-core.esm-bundler.js:3991
    render runtime-core.esm-bundler.js:5108
    mount runtime-core.esm-bundler.js:3429
    mount runtime-dom.esm-bundler.js:1206
    <anonymous> main.js:4
    js app.js:1103
    __webpack_require__ app.js:849
    fn app.js:151
    1 app.js:1116
    __webpack_require__ app.js:849
    checkDeferredModules app.js:46
    <anonymous> app.js:925
    <anonymous> app.js:928
es7.js:132
    handler es7.js:132
    handler self-hosted:1161
    callWithErrorHandling runtime-core.esm-bundler.js:154
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:163
    job runtime-core.esm-bundler.js:5285
    doWatch runtime-core.esm-bundler.js:5332
    watch runtime-core.esm-bundler.js:5198
    createWatcher runtime-core.esm-bundler.js:5757
    applyOptions runtime-core.esm-bundler.js:5601
    forEach self-hosted:206
    applyOptions runtime-core.esm-bundler.js:5599
    finishComponentSetup runtime-core.esm-bundler.js:6276
    setupStatefulComponent runtime-core.esm-bundler.js:6212
    setupComponent runtime-core.esm-bundler.js:6152
    mountComponent runtime-core.esm-bundler.js:4400
    processComponent runtime-core.esm-bundler.js:4376
    patch runtime-core.esm-bundler.js:3991
    mountChildren runtime-core.esm-bundler.js:4180
    processFragment runtime-core.esm-bundler.js:4339
    patch runtime-core.esm-bundler.js:3984
    componentEffect runtime-core.esm-bundler.js:4493
    reactiveEffect reactivity.esm-bundler.js:42
    effect reactivity.esm-bundler.js:17
    setupRenderEffect runtime-core.esm-bundler.js:4458
    mountComponent runtime-core.esm-bundler.js:4416
    processComponent runtime-core.esm-bundler.js:4376
    patch runtime-core.esm-bundler.js:3991
    componentEffect runtime-core.esm-bundler.js:4493
    reactiveEffect reactivity.esm-bundler.js:42
    effect reactivity.esm-bundler.js:17
    setupRenderEffect runtime-core.esm-bundler.js:4458
    mountComponent runtime-core.esm-bundler.js:4416
    processComponent runtime-core.esm-bundler.js:4376
    patch runtime-core.esm-bundler.js:3991
    render runtime-core.esm-bundler.js:5108
    mount runtime-core.esm-bundler.js:3429
    mount runtime-dom.esm-bundler.js:1206
    <anonymous> main.js:4
    js app.js:1103
    __webpack_require__ app.js:849
    fn app.js:151
    1 app.js:1116
    __webpack_require__ app.js:849
    checkDeferredModules app.js:46
    <anonymous> app.js:925
    <anonymous> app.js:928

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

Since VueJS 3 was officially release today, I decided to try it out with this component.

Using vue-cli to create the structure of the project with these package versions:

"dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0-0",
    "vue-bootstrap-typeahead": "^0.2.6",
    "vue-simple-suggest": "^1.10.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  },

Here's my component code, taken from the docs

HelloWorld.vue

<!-- Some component.vue -->
<template>
  <vue-simple-suggest
    v-model="chosen"
    :list="simpleSuggestionList"
    :filter-by-query="true">
<!-- Filter by input text to only show the matching results -->
  </vue-simple-suggest>

  <br>

  <p>Chosen element: {{ chosen }}</p>
</template>

<script>
  import VueSimpleSuggest from 'vue-simple-suggest/dist/es7'
  import 'vue-simple-suggest/dist/styles.css' // Optional CSS

  export default {
    components: {
      VueSimpleSuggest
    },
    data() {
      return {
        chosen: ''
      }
    },
    methods: {
      simpleSuggestionList() {
        return [
          'Vue.js',
          'React.js',
          'Angular.js'
        ]
      }
    }
  }
</script>

What is the expected behavior?

To initialize without any errors.

How are you importing Vue-simple-suggest?

I have tried all of these import techniques, all with the same result

• ESNext (original code, single-file .vue component, css included) (import VueSimpleSuggest from 'vue-simple-suggest/lib')
• ES6 (import VueSimpleSuggest from 'vue-simple-suggest')
• ES7 and above (import VueSimpleSuggest from 'vue-simple-suggest/dist/es7')
• Bundled version (import VueSimpleSuggest from 'vue-simple-suggest')
• CommonJS (const VueSimpleSuggest = require('vue-simple-suggest'))
• UMD Component (<script type="text/javascript" src="https://unpkg.com/vue-simple-suggest"></script>)

What is the motivation / use case for changing the behavior?

To get this to work with VueJS 3.

Please tell us about your environment:

• Vue.js Version: 3.0.0-0
• Vue-simple-suggest version: 1.10.2
• Browser: Firefox 82.0a1
• Language: ES6/7

[kaskar2008]

@jonesnc Thank you for the report. I see the problem. Vue-simple-suggest is simply not ready for migration (Yet!)

[coolsam726]

A migration of the package to vue3 would be really nice. I couldn't use it due to this same error.