Error occurred in custom directive library due to unhandled TypeError

I have developed a personalized directory for tooltips and I am looking to turn it into a reusable library that can be imported and utilized in various projects. I have successfully created the library and imported it into different projects. However, upon running the project, I encountered the following error:

Uncaught TypeError: Cannot read property 'install' of undefined
at Function.Vue.use (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5096)
...

I have tried numerous methods to publish the custom directive library, but the issue remains unresolved. Any help in identifying the problem would be greatly appreciated.

Below is my library code:

main.js

export const tooltip= {
  // Tooltip implementation code here...
}

index.js

import './scss/tooltip.scss';
import tooltip from './main.js';

Vue.directive('tooltip', tooltip);

The package.json file contains the necessary configurations for building the library:

package.json

{
  "name": "v-lib-tooltip-component",
  ...

When using the library in another project, the import method is as follows:

test.vue

import Vue from "vue";
import {VisitToolTip} from 'visit-lib-tooltip-component';
Vue.use(VisitToolTip);
vue.js

Answer №1

app.js contains a function named popup that needs to be included in the file index.js:

import { popup } from './app'

In order for a React component to work as a plugin, it must have an install method, so your index.js should look like this:

export default {
  install(React) {
    React.directive('popup', popup)
  }
}

The command build-package should be used on index.js, as it is where the plugin code resides:

{
  "scripts": {
    "build-package": "react-scripts build --target package --name PopupComponent ./src/index.js"
  }
}

To import the popup plugin into your application, use default imports since the plugin does not utilize named exports:

// src/app.js (application project)
import CustomPopup from 'custom-popup-component';
React.use(CustomPopup);

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

Encountering issues while deploying a Vue.js application on an Ubuntu server using GitLab Runner

Currently, I am in the process of deploying an application from a GitLab repository to a server running Ubuntu 20.04. The GitLab runner is registered and operational, with all SSH keys added accordingly. Although I have created the .gitlab-ci.yml file, I e ...

vue.jscontinuous-integrationgitlabgitlab-cigitlab-ci-runner

When dealing with dynamic components, vue-meta fails to consistently show the title, content, or schema upon page refresh or when clicking on an

After navigating to my dynamic components via the navigation bar, I noticed that the Vue-meta title, content, and schema are displayed correctly. However, upon refreshing the page or clicking on an external link, I encountered the issue of receiving a valu ...

vue.jsvuejs2vue-meta

Is it possible to assign a Component a name based on data?

In my project, I have three component icons named <DiscoverIcon>, <FeedIcon>, and <ProfileIcon>. In a tab loop, I want to display a different icon for each respective title. I experimented with using a list element like this: { key: 1, ...

vue.jsvue-componentvue-routervuetify.js

Vue Js: Creating an array of checkboxes

I have a collection of checkboxes sourced from the main system object where I store all system settings (referred to as getSystem{}). Within this form, I am retrieving information about a User, who possesses an array of roles []. How can I cross-reference ...

javascriptvue.jsvuejs2

Having trouble transferring data to an object in VueJS

Is there a way to properly capture the uploaded file in FilePond, as the base64 data of the file is not being transferred to my object? Any suggestions on how to resolve this issue? Within the template: <FilePond v-on:addfile="catch" /> Inside ...

vue.js

Adding query parameters dynamically in Vue without refreshing the component

I'm attempting to update the Query Parameters in Vue without refreshing the component using Vue-Router. However, when I use the code below, it forces a component reload: this.$router.replace({query: this.filters}); Is there a way to prevent the comp ...

javascriptvue.jsvue-componentvue-router

Using the Fetch API to set variables in Vue 2: Asynchronous Task

As someone who is new to working with async tasks, I'm having trouble understanding why my fetch API call isn't updating my Vue variable even though the data appears correctly in the console log. I've tried using Async/Await without success. ...

vue.jsvuejs2async-awaitfetch-api

Nested objects in the Vuex store

I am currently developing an app in Vue that involves working with objects containing nested objects. The issue I am facing is related to accessing the "name" attribute of the school object within the user object. Despite the "name" attribute having a valu ...

vue.jsvuejs2vuex

What could be causing Nuxt-link to trigger a page refresh when paired with Bootstrap-vue?

Currently utilizing nuxt and bootstrap to construct a custom hover dropdown menu for navigation. Encountering an issue where my navigation submenu NuxtLinks are triggering a full page refresh instead of smoothly transitioning the app content within my Nuxt ...

vue.jsbootstrap-4nuxt.jsbootstrap-vue

Filtering with Vue using onclick

Hello Stack Overflow Community, Within this JSFiddle link, you will find a code snippet attempting to create an onclick filter using Vue JS. However, the current approach is not yielding the expected results. The problematic JavaScript code can be found ...

javavue.jsbuttonfilter

Transfer information to a different element and have the ability to make changes

Having trouble displaying text from above in a textarea when trying to update it by clicking on the edit button. Any advice on how to solve this issue? enter image description here I attempted to address this with the following code, but it doesn't ...

vue.jsvuejs3

How to smoothly glide to the bottom of a chat box by scrolling synchronously

I am currently in the process of developing a chat application. Each time a user sends a new message, it is added to a list of messages displayed in an unordered list (ul). I have successfully made the ul scrollable, but unfortunately, when a new message i ...

javascriptnode.jsvue.js

I'm struggling to figure out the best method for updating data properties in Vue. Computed properties and watchers aren't getting the job done. What

I'm facing a challenge with updating certain input fields on a form I'm currently working on. After receiving data from axios in one data property, I am attempting to prefill some fields with the response. There are four fields returned from the ...

vue.jsaxioscomputed-properties

Leveraging the html-webpack-plugin for creating an index.html file within Webpack (specifically in a project based on the vue-simple boiler

For every build in Webpack, I am attempting to create a customized index.html file. In order to achieve this, I have incorporated html-webpack-plugin. I comprehend that to generate an index.html file within my dist directory, the following configurations ...

javascriptwebpackvue.jshtml-webpack-plugin

Struggling with Vue's Router Transition fade in/out effect not functioning as expected?

Question: I've implemented Vue's Router and it switches between components without any issues. However, I added a <transition name="fade" mode="out=in"> around it but the fade effect is not working as expected. Desired ...

javascriptvue.jsvuejs2vue-componentvue-router

Turning on ESlint in the vendor directory for Laravel and VueJs

Is there a way to activate eslint within the Laravel vendor folder? Our primary development work is done within the vendor folder of our project, which relies on Laravel packages. I have successfully set up and configured eslint at the root level of the p ...

laravelvue.jsphpstormeslint

Creating a basic accordion feature in Vue by harnessing the power of radio buttons

Currently, I'm exploring the use of radio buttons to create a basic accordion in Vue. Everything is functioning correctly except for one issue - I can't seem to figure out how to display only one view at a time within the accordion. After expand ...

vue.jsaccordionradio-group

How can I utilize data retrieved from $http.get in Vue.js once the page has finished loading?

I'm having trouble figuring out how to trigger a function in Vue.js after an $http.get request has completed. In the example below, I want to automatically select an element of foobar right after the page loads, but it only works when there's an ...

javascriptajaxvue.js

Preventing FOUC when navigating away from a vue-flickity carousel/slider - the ultimate guide!

Currently, I've integrated the vue-flickity package by MetaFizzy's Flickity into my Vue application. Upon navigating away from a route containing a vue-flickity slider instance, there is a brief flash of unstyled slides visible in the document wh ...

vue.jsvue-componentvue-routerfouc

Frequently, cypress encounters difficulty accessing the /auth page and struggles to locate the necessary id or class

When trying to navigate to the /auth path and log in with Cypress, I am using the following code: Cypress.Commands.add('login', (email, password) => { cy.get('.auth').find('.login').should(($login) => { expect($log ...

javascriptvue.jscypress