vue-simple-suggest
vue-simple-suggest copied to clipboard
Error: "Uncaught TypeError: can't access property "options", this.constructor is undefined" when using Vue 3
I'm submitting a ...
- [X] bug report
- [ ] feature request
- [x] 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
- [X] ESNext (original code, single-file .vue component, css included) (
import VueSimpleSuggest from 'vue-simple-suggest/lib'
) - [X] ES6 (
import VueSimpleSuggest from 'vue-simple-suggest'
) - [X] ES7 and above (
import VueSimpleSuggest from 'vue-simple-suggest/dist/es7'
) - [X] 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
@jonesnc Thank you for the report. I see the problem. Vue-simple-suggest is simply not ready for migration (Yet!)
A migration of the package to vue3 would be really nice. I couldn't use it due to this same error.