Error encountered in Vue 3 typescript: Uncaught TypeError - this.$on function is not defined in this context

Just set up a fresh installation of Vue 3 using vue-cli and typescript. Everything seems to be running smoothly, but as soon as I incorporate the https://vue-select.org/ package, I encounter this error in the browser console:

Uncaught (in promise) TypeError: this.$on is not a function
    at Proxy.created (vue-select.js?4a7a:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:155)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:164)
    at callHook (runtime-core.esm-bundler.js?5c40:3182)
    at applyOptions (runtime-core.esm-bundler.js?5c40:3109)
    at finishComponentSetup (runtime-core.esm-bundler.js?5c40:7265)
    at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:7190)
    at setupComponent (runtime-core.esm-bundler.js?5c40:7117)
    at mountComponent (runtime-core.esm-bundler.js?5c40:5115)
    at processComponent (runtime-core.esm-bundler.js?5c40:5090)

Here's a simple example:

Home.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <vSelect :options="[{label: 'Canada', code: 'ca'}]"></vSelect>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import vSelect from 'vue-select';

@Options({
  components: {
    HelloWorld,
    vSelect
  },
})
export default class Home extends Vue {}
</script>
typescriptvue.jsvuejs3vue-select

Answer №1

It seems like the issue at hand is not specific to Vue3 but rather related to typescript. You can resolve this by including the @types/vue-select package, which provides type definitions for vue-select. Additionally, if you are utilizing webpack as your bundler, remember to also include the @types/webpack-env package, which offers type definitions for webpack.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Vue text failed to display the variable. Any ideas on why?

While working with a library, I encountered the issue of having "Close {{myVar}}" displayed on the screen. Can anyone guide me on how to use template literals in Vue? I have experience with React JSX. <template> <a-alert message="Info Tex ...

javascriptreactjsvue.jsvuex

What are the steps to enable screen sharing within an Electron application?

I am currently working on developing two applications for screen sharing within a LAN setting using Electron, React, and TypeScript. The first app will capture the screen stream and broadcast it via UDP, while the second app, running on multiple devices, w ...

node.jstypescriptelectronwebrtcelectron-forge

Trigger a function upon clicking a DOM element in Vue.js

My goal is to trigger a function whenever I click on elements in the DOM that have a specific class. Despite my efforts, the functionality doesn't seem to work, and no errors are being reported. Here's the relevant code: methods: { ...

javascripthtmlvue.jsvuejs2vue-component

The error persists in the Vee-validate regex rule despite having a successful match

Struggling with creating a regex to match a UUID - after validating it online and confirming that the regex is correct, vee-validate still shows it as an error. Any suggestions on how to fix this? <form @submit.prevent="performSearch"> ...

regexvue.jsvee-validatevue-validator

Merging Two JSON Objects into a Single Object Using Angular 4-6

Two JSONs are available: The first one (with a length of 200): {date_end: "2099-12-31", id: "2341"} {date_end: "2099-12-31" id: "2342"} ... The second one (length 200): {type: "free", discount:"none", warranty: "yes"} {type: "free", discount:"none", ...

angulartypescript

Custom Vue overlay designed specifically for individual cards

I have a Vue project with Vuetify where I am rendering 8 different cards using a for loop. Each card has its own overlay that displays its image when clicked. However, the issue is that when I click on one card, all of the overlays are activated instead of ...

vue.jsvuetify.js

Using the className prop in React with TypeScript

How can the className prop be properly typed and utilized in a custom component? In the past, it was possible to do the following: class MyComponent extends React.Component<MyProps, {}> { ... } and then include the component using: <MyCompone ...

reactjstypescript

Creating formGroups dynamically for each object in an array and then updating the values with the object data

What I am aiming to accomplish: My goal is to dynamically generate a new formGroup for each recipe received from the backend (stored in this.selectedRecipe.ingredients) and then update the value of each formControl within the newly created formGroup with t ...

javascriptangulartypescriptangular-reactive-forms

Guide on integrating the Nuxt Auth library for simulating components in Nuxt using Jest

Currently diving into the world of JavaScript. Recently, I created a Nuxt application and successfully integrated the @nuxt/auth middleware globally in my nuxt.config.js. Everything is working smoothly within my application. Now, I am eager to test some ...

unit-testingvue.jsjestjsnuxt.js

What is the procedure to delete one file out of three files that have been uploaded using Vuetify?

After consulting the documentation at https://vuetifyjs.com/en/components/file-inputs#selection-slot, I have implemented the following code: <v-file-input v-model="files" placeholder="Upload your documents" label="File input" multiple prepend ...

vue.jsfile-uploadvue-componentvuetify.jsimage-uploading

Attempting to grasp the concept of implementing FormArray

When I execute the following code: this.formArray = new FormArray([ new FormControl(''), new FormControl(''), ]); formControlA() { return this.formArray.at(0); } formControlB() { return this.formArray.at(1); } and then use it ...

angulartypescript

What are the steps to resolve the vulnerability within vue-cli-service?

Recently, I set up a new project using @vue/cli 4.3.1 on a fresh installation of Ubuntu 19.10 with npm 6.14.4. Upon running npm install in the project directory, I received the following message: found 1 high severity vulnerability run `npm audit fix` t ...

vue.jssecuritynpmvue-cli

Using TypeScript with knockout for custom binding efforts

I am in the process of developing a TypeScript class that will handle all bindings using Knockout's mechanisms. Although I have made progress with the initial steps, I have encountered a roadblock. While I can successfully bind data to my HTML element ...

typescriptknockout.jsdata-binding

Changing the value of a ref in Vue 3 within a function

I need to change the value of 'reset' from true to false when a file is uploaded. Even though 'reset' is externally set to true, it should be changed to false during file upload process. How can this be achieved? <template> rese ...

vue.js

Utilizing TypeScript with React to dynamically select which component to render

My task seemed simple at first: to render a React component based on its name/type. Here is an example of how it is used: // WidgetsContainer.ts // components have a difference in props shape! const componentsData = [ { type: 'WIDGET_1', ...

reactjstypescript

Proper usage of a method within another method in a Vue component

Currently, I am extracting GPS data from an image using exifjs. My objective is to convert the latitude and longitude variables into a decimal variable as illustrated below: <template lang="html"> <div class="upload-wrap"> <button cla ...

javascriptvue.jsvuejs2

Customize the Vuetify 2.0 sass variable $heading-font-family

I'm currently trying to customize the default variable $heading-font-family in Vuetify 2.0.0-beta.0, but I'm encountering issues with this particular override. Oddly enough, I have been successful in overriding other variables such as $body-font- ...

cssvue.jssassvuetify.js

New substitute for extending the extent in OpenLayers 4

I am currently in the process of migrating my code from OpenLayers 3 to OpenLayers 4 using TypeScript. Previously, I had a code snippet that extended the extent of my map so that all vector shapes I drew would be visible upon loading... angular.forEach(w ...

angulartypescriptopenlayersopenlayers-3openlayers-5

What is the best way to delay an observable from triggering the next event?

In my Angular project, I am implementing RxJs with two subjects. s1.next() s1.subscribe(() => { // perform some operation and then trigger the event for s2 s2.next() }); s2.subscribe(() => { // perform some operat ...

javascripttypescriptrxjslockingobservable

Rxjs error: The 'pipe' property is not found on the 'UnaryFunction<Observable<{}>, Observable<string | {}>>' type

Currently working on implementing ngbTypeAhead and encountering problems with RxJS version 5.5.5. The example I am referencing is from version 6 of rxjs. "rxjs": "^5.5.2" and angular "^5.0.1", "typescript": "~2.6.1", While trying to apply typeahead on f ...

angulartypescriptrxjsangular5rxjs5